@lightspeed/design-system-css 34.0.1 → 35.0.0

package/dist/index.css

@@ -489,7 +489,7 @@
 
 body {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -518,7 +518,7 @@ details,
 
 .vd-text-grand {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -530,7 +530,7 @@ details,
 
 .vd-text-hero {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -542,7 +542,7 @@ details,
 
 .vd-text-heading {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -554,7 +554,7 @@ details,
 
 .vd-text-sub-heading {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -566,7 +566,7 @@ details,
 
 .vd-text-intro {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -578,7 +578,7 @@ details,
 
 .vd-text-signpost {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -592,7 +592,7 @@ details,
 
 .vd-text-label {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -604,7 +604,7 @@ details,
 
 .vd-text-body {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -616,7 +616,7 @@ details,
 
 .vd-text-supplementary {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -628,7 +628,7 @@ details,
 
 .vd-text-mini-signpost {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -641,7 +641,7 @@ details,
 
 .vd-text-mini-copy {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -653,7 +653,7 @@ details,
 
 .vd-text-button {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -1853,7 +1853,7 @@ details,
 
 .vd-avatar--initials {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -1868,7 +1868,7 @@ details,
 }
 .vd-avatar--initials.vd-avatar--x-small {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -1879,7 +1879,7 @@ details,
 }
 .vd-avatar--initials.vd-avatar--small {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -1911,6 +1911,10 @@ details,
 }
 
 .vd-avatar-multi {
+  display: grid;
+  grid-template-columns: repeat(2, 36px);
+  grid-column-gap: 4px;
+  row-gap: 4px;
   width: 76px;
   height: 76px;
 }
@@ -1924,6 +1928,12 @@ details,
   background-color: var(--hs-color-bg-neutral-edge);
   position: relative;
 }
+.vd-avatar-multi-tile:only-child {
+  grid-area: 2 span/2 span;
+}
+.vd-avatar-multi-tile:first-child:nth-last-child(3) {
+  grid-area: 2 span;
+}
 .vd-avatar-multi-tile[vd-lazy-load*="placeholder.svg"] {
   background-size: 60px;
 }
@@ -1941,33 +1951,6 @@ details,
   transform: translateY(-50%);
 }
 
-@supports (display: grid) {
-  .vd-avatar-multi {
-    display: grid;
-    grid-template-columns: repeat(2, 36px);
-    grid-column-gap: 4px;
-    row-gap: 4px;
-  }
-  .vd-avatar-multi-tile:only-child {
-    grid-area: 2 span/2 span;
-  }
-  .vd-avatar-multi-tile:first-child:nth-last-child(3) {
-    grid-area: 2 span;
-  }
-}
-@supports not (display: grid) {
-  .vd-avatar-multi {
-    display: flex;
-    flex-wrap: wrap;
-    width: 76px;
-    height: 76px;
-  }
-  .vd-avatar-multi-tile {
-    flex: 1 1 50%;
-    border: 2px solid var(--hs-color-bg-neutral-top);
-    border-radius: 5px;
-  }
-}
 .vd-banner-wrapper {
   display: flex;
   flex: 1;
@@ -1985,22 +1968,6 @@ details,
   position: relative;
   backdrop-filter: brightness(0.9);
 }
-@supports not (backdrop-filter: brightness(0.9)) {
-  .vd-banner-feedback::before {
-    content: "";
-    background: #000;
-    filter: opacity(0.1);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-  }
-  .vd-banner-feedback .vd-feedback-content {
-    z-index: 1;
-  }
-}
 
 .vd-banner-wrapper,
 .vd-banner-feedback {
@@ -2123,7 +2090,7 @@ details,
 
 .vd-btn {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -2405,7 +2372,7 @@ a.vd-btn.disabled {
 
 .vd-btn--jumbo {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -2433,7 +2400,7 @@ a.vd-btn.disabled {
 
 .vd-btn-panel {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -2461,7 +2428,7 @@ a.vd-btn.disabled {
   position: relative;
   text-align: center;
   transition-property: background, color, border, box-shadow;
-  transition: all 0.2s;
+  transition-duration: 0.2s;
 }
 .vd-btn-panel:disabled, .vd-btn-panel.disabled {
   cursor: not-allowed;
@@ -2717,7 +2684,7 @@ vd-carousel-frame {
 
 .vd-checkbox-description {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -2735,11 +2702,11 @@ vd-carousel-frame {
   height: 24px;
   width: 24px;
   background-color: var(--hs-color-bg-neutral-top);
-  border: 1px solid var(--hs-color-border-neutral-strong);
+  border: 2px solid var(--hs-color-border-neutral-strong);
   border-radius: 4px;
   box-sizing: border-box;
 }
-.vd-checkbox-tick:after {
+.vd-checkbox-tick::after {
   content: "";
   box-sizing: content-box;
   display: block;
@@ -2751,13 +2718,13 @@ vd-carousel-frame {
   transform-origin: left top;
   height: 11px;
   width: 6px;
-  top: 11px;
-  left: 2px;
+  top: 10px;
+  left: 1px;
   opacity: 0;
   transition: opacity 0.2s;
 }
 
-.vd-checkbox-input:hover + .vd-checkbox-tick:after {
+.vd-checkbox-input:hover + .vd-checkbox-tick::after {
   opacity: 1;
 }
 
@@ -2770,7 +2737,7 @@ vd-carousel-frame {
   background-color: var(--hs-color-bg-go-default);
   border-color: var(--hs-color-bg-go-default);
 }
-.vd-checkbox-input:checked + .vd-checkbox-tick:after {
+.vd-checkbox-input:checked + .vd-checkbox-tick::after {
   opacity: 1;
   animation: vd-checkbox-checked 0.8s;
   border-color: var(--hs-color-fg-neutral-ondark-default);
@@ -2783,8 +2750,8 @@ vd-carousel-frame {
   cursor: not-allowed;
   filter: grayscale(100%);
 }
-.vd-disabled .vd-checkbox-input:hover:not(:checked) + .vd-checkbox-tick:after,
-.vd-checkbox-input:disabled:hover:not(:checked) + .vd-checkbox-tick:after {
+.vd-disabled .vd-checkbox-input:hover:not(:checked) + .vd-checkbox-tick::after,
+.vd-checkbox-input:disabled:hover:not(:checked) + .vd-checkbox-tick::after {
   opacity: 0;
 }
 .vd-disabled .vd-checkbox-input ~ .vd-checkbox-label,
@@ -2801,7 +2768,7 @@ vd-carousel-frame {
   border: 2px solid var(--hs-color-bg-go-default);
 }
 
-.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
+.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick::after {
   background-color: var(--hs-color-bg-go-default);
   border: none;
   top: 9px;
@@ -2910,7 +2877,7 @@ vd-carousel-frame {
 .vd-datepicker,
 .vd-datepicker-range {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -2951,8 +2918,8 @@ vd-carousel-frame {
 .vd-datepicker-range .pika-table {
   margin-top: 20px;
 }
-.vd-datepicker .pika-table tbody:before,
-.vd-datepicker-range .pika-table tbody:before {
+.vd-datepicker .pika-table tbody::before,
+.vd-datepicker-range .pika-table tbody::before {
   content: " ";
   display: block;
   margin-top: 10px;
@@ -2988,8 +2955,8 @@ vd-carousel-frame {
   display: inline-block;
   visibility: hidden;
 }
-.vd-datepicker .pika-title .pika-label:nth-child(even):before,
-.vd-datepicker-range .pika-title .pika-label:nth-child(even):before {
+.vd-datepicker .pika-title .pika-label:nth-child(even)::before,
+.vd-datepicker-range .pika-title .pika-label:nth-child(even)::before {
   position: absolute;
   content: " ";
   pointer-events: none;
@@ -3002,8 +2969,8 @@ vd-carousel-frame {
   border-bottom: 5px solid var(--hs-color-fg-neutral-default);
   right: 37px;
 }
-.vd-datepicker .pika-title .pika-label:nth-child(even):after,
-.vd-datepicker-range .pika-title .pika-label:nth-child(even):after {
+.vd-datepicker .pika-title .pika-label:nth-child(even)::after,
+.vd-datepicker-range .pika-title .pika-label:nth-child(even)::after {
   position: absolute;
   content: " ";
   pointer-events: none;
@@ -3017,8 +2984,8 @@ vd-carousel-frame {
   top: 10px;
   right: 37px;
 }
-.vd-datepicker .pika-title .pika-label:nth-child(odd):before,
-.vd-datepicker-range .pika-title .pika-label:nth-child(odd):before {
+.vd-datepicker .pika-title .pika-label:nth-child(odd)::before,
+.vd-datepicker-range .pika-title .pika-label:nth-child(odd)::before {
   position: absolute;
   content: " ";
   pointer-events: none;
@@ -3031,8 +2998,8 @@ vd-carousel-frame {
   border-bottom: 5px solid var(--hs-color-fg-neutral-default);
   right: 110px;
 }
-.vd-datepicker .pika-title .pika-label:nth-child(odd):after,
-.vd-datepicker-range .pika-title .pika-label:nth-child(odd):after {
+.vd-datepicker .pika-title .pika-label:nth-child(odd)::after,
+.vd-datepicker-range .pika-title .pika-label:nth-child(odd)::after {
   position: absolute;
   content: " ";
   pointer-events: none;
@@ -3143,8 +3110,8 @@ vd-carousel-frame {
   visibility: hidden;
   cursor: pointer;
 }
-.vd-datepicker .pika-title .pika-prev:before,
-.vd-datepicker-range .pika-title .pika-prev:before {
+.vd-datepicker .pika-title .pika-prev::before,
+.vd-datepicker-range .pika-title .pika-prev::before {
   content: " ";
   visibility: visible;
   position: absolute;
@@ -3155,8 +3122,8 @@ vd-carousel-frame {
   box-sizing: initial;
   transform: rotate(225deg);
 }
-.vd-datepicker .pika-title .pika-prev.is-disabled:before,
-.vd-datepicker-range .pika-title .pika-prev.is-disabled:before {
+.vd-datepicker .pika-title .pika-prev.is-disabled::before,
+.vd-datepicker-range .pika-title .pika-prev.is-disabled::before {
   border-right: 3px solid var(--hs-color-border-neutral-soft);
   border-top: 3px solid var(--hs-color-border-neutral-soft);
 }
@@ -3167,8 +3134,8 @@ vd-carousel-frame {
   visibility: hidden;
   cursor: pointer;
 }
-.vd-datepicker .pika-title .pika-next:before,
-.vd-datepicker-range .pika-title .pika-next:before {
+.vd-datepicker .pika-title .pika-next::before,
+.vd-datepicker-range .pika-title .pika-next::before {
   content: " ";
   visibility: visible;
   position: absolute;
@@ -3179,8 +3146,8 @@ vd-carousel-frame {
   box-sizing: initial;
   transform: rotate(45deg);
 }
-.vd-datepicker .pika-title .pika-next.is-disabled:before,
-.vd-datepicker-range .pika-title .pika-next.is-disabled:before {
+.vd-datepicker .pika-title .pika-next.is-disabled::before,
+.vd-datepicker-range .pika-title .pika-next.is-disabled::before {
   border-right: 3px solid var(--hs-color-border-neutral-soft);
   border-top: 3px solid var(--hs-color-border-neutral-soft);
 }
@@ -3452,28 +3419,6 @@ vd-carousel-frame {
   }
 }
 
-@supports not (--a: 0) {
-  .vd-dialog .vd-dialog-banner {
-    margin: -32px;
-    margin-bottom: 32px;
-  }
-  .vd-dialog .vd-dialog-banner .vd-banner-wrapper {
-    padding: 16px 32px;
-  }
-  .vd-dialog-container {
-    padding: 32px;
-  }
-  .vd-dialog-header {
-    margin-bottom: 32px;
-  }
-  .vd-dialog-content {
-    margin: 0-32px;
-    padding: 0 32px;
-  }
-  .vd-dialog-content + .vd-dialog-actions {
-    margin-top: 32px;
-  }
-}
 .vd-dialog-close {
   display: flex;
   align-items: center;
@@ -3683,7 +3628,7 @@ vd-dott,
 
 .vd-label {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -3740,7 +3685,7 @@ vd-dott,
 
 .vd-flag {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -3929,7 +3874,7 @@ vd-dott,
   color: var(--hs-color-fg-neutral-default);
   line-height: 1.2;
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 32px;
@@ -3939,7 +3884,7 @@ vd-dott,
 
 .vd-hero-intro {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -3968,7 +3913,7 @@ vd-dott,
   font-size: 15px;
 }
 .vd-hero-container .vd-hero-aux {
-  flex: 0 0 33.33333%;
+  flex: 0 0 33.3333%;
 }
 @media only screen and (max-width: 1000px) {
   .vd-hero-container .vd-hero-aux {
@@ -3978,7 +3923,7 @@ vd-dott,
 
 .vd-hero-aux-headline {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -3994,7 +3939,7 @@ vd-dott,
 
 .vd-hero-aux-hr {
   margin: 12px auto;
-  border-top: 1px solid currentColor;
+  border-top: 1px solid currentcolor;
   border-right: none;
   border-bottom: none;
   border-left: none;
@@ -4003,7 +3948,7 @@ vd-dott,
 
 .vd-hero-aux-content {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.6;
@@ -4119,7 +4064,7 @@ vd-dott,
 }
 
 .vd-link--secondary {
-  color: currentColor !important;
+  color: currentcolor !important;
   text-decoration: underline !important;
 }
 @media (hover: hover) {
@@ -4130,7 +4075,7 @@ vd-dott,
 
 .vd-lozenge {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -4174,7 +4119,7 @@ vd-dott,
 }
 
 @keyframes vd-lozenge-group-already-added {
-  from {
+  0% {
     transform: scale3d(1, 1, 1);
   }
   10%, 20% {
@@ -4186,7 +4131,7 @@ vd-dott,
   40%, 60%, 80% {
     transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
   }
-  to {
+  100% {
     transform: scale3d(1, 1, 1);
   }
 }
@@ -4273,9 +4218,9 @@ vd-dott,
   height: 16px;
 }
 .vd-btn .vd-loader {
-  border-top-color: currentColor;
-  border-right-color: currentColor;
-  border-bottom-color: currentColor;
+  border-top-color: currentcolor;
+  border-right-color: currentcolor;
+  border-bottom-color: currentcolor;
 }
 
 .vd-btn .vd-loader--small {
@@ -4342,7 +4287,7 @@ vd-dott,
 
 .vd-modals-container {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4395,7 +4340,7 @@ vd-dott,
 
 .vd-popover-container {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4658,7 +4603,7 @@ vd-dott,
 }
 
 .vd-popover-list-group-header {
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: 0.2s;
   transition-property: color, background;
@@ -4666,7 +4611,7 @@ vd-dott,
   padding: 16px 24px;
   word-break: break-word;
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -4692,7 +4637,7 @@ vd-dott,
 }
 
 .vd-popover-list-group-divider {
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: 0.2s;
   transition-property: color, background;
@@ -4700,7 +4645,7 @@ vd-dott,
   padding: 8px 24px;
   word-break: break-word;
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -4725,7 +4670,7 @@ vd-dott,
 }
 
 .vd-popover-list-item {
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: 0.2s;
   transition-property: color, background;
@@ -4747,7 +4692,7 @@ vd-dott,
 }
 
 .vd-popover-list-empty {
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: 0.2s;
   transition-property: color, background;
@@ -4761,7 +4706,7 @@ vd-dott,
 
 .vd-popover-list-header {
   position: relative;
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: 0.2s;
   transition-property: color, background;
@@ -4777,7 +4722,7 @@ vd-dott,
 }
 
 .vd-popover-list-footer {
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: 0.2s;
   transition-property: color, background;
@@ -4800,7 +4745,7 @@ vd-dott,
 
 .vd-popover-list-footer-action {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -4855,7 +4800,7 @@ vd-dott,
   color: var(--hs-color-fg-neutral-default);
   line-height: 1.25;
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4970,7 +4915,7 @@ vd-dott,
 
 .vd-radio-description {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -4997,7 +4942,7 @@ vd-dott,
   border: 2px solid var(--hs-color-border-neutral-strong);
   box-sizing: border-box;
 }
-.vd-radio-tick:after {
+.vd-radio-tick::after {
   content: "";
   display: block;
   position: absolute;
@@ -5006,12 +4951,12 @@ vd-dott,
   border-radius: 50%;
   background-color: var(--hs-color-border-neutral-strong);
   opacity: 0;
-  left: 5px;
-  top: 5px;
+  left: 6px;
+  top: 6px;
   transition: opacity 0.2s;
 }
 
-.vd-radio-input:hover + .vd-radio-tick:after {
+.vd-radio-input:hover + .vd-radio-tick::after {
   opacity: 1;
 }
 
@@ -5020,7 +4965,7 @@ vd-dott,
   background-color: var(--hs-color-bg-go-default);
   border-color: var(--hs-color-bg-go-default);
 }
-.vd-radio-input:checked + .vd-radio-tick:after {
+.vd-radio-input:checked + .vd-radio-tick::after {
   opacity: 1;
   animation: vd-radio-checked 0.8s;
   background-color: var(--hs-color-fg-neutral-ondark-default);
@@ -5033,12 +4978,12 @@ vd-dott,
   cursor: not-allowed;
   filter: grayscale(100%);
 }
-.vd-radio.vd-disabled .vd-radio-input:hover + .vd-radio-tick:after,
-.vd-radio-input:disabled:hover + .vd-radio-tick:after {
+.vd-radio.vd-disabled .vd-radio-input:hover + .vd-radio-tick::after,
+.vd-radio-input:disabled:hover + .vd-radio-tick::after {
   opacity: 0;
 }
-.vd-radio.vd-disabled .vd-radio-input:hover:checked + .vd-radio-tick:after,
-.vd-radio-input:disabled:hover:checked + .vd-radio-tick:after {
+.vd-radio.vd-disabled .vd-radio-input:hover:checked + .vd-radio-tick::after,
+.vd-radio-input:disabled:hover:checked + .vd-radio-tick::after {
   opacity: 1;
   background-color: var(--hs-color-bg-neutral-top);
 }
@@ -5147,23 +5092,6 @@ vd-section .vd-section,
 .vd-section .vd-section {
   padding: var(--vd-section-padding-v) 0;
 }
-@supports not (--a: 0) {
-  vd-section,
-  .vd-section {
-    padding: 24px 48px;
-  }
-  vd-section .vd-section-container,
-  .vd-section .vd-section-container {
-    margin: -24px -48px;
-    padding: 24px 48px;
-  }
-  vd-section vd-section,
-  vd-section .vd-section,
-  .vd-section vd-section,
-  .vd-section .vd-section {
-    padding: 24px 0;
-  }
-}
 
 .vd-section--secondary,
 .vd-section--secondary .vd-section-container {
@@ -5233,7 +5161,7 @@ vd-section .vd-section,
 @media only screen and (max-width: 768px) {
   .vd-section--action-bar-about {
     flex-basis: 100%;
-    padding: 0 0 24px 0;
+    padding: 0 0 24px;
   }
 }
 
@@ -5701,7 +5629,7 @@ table {
 }
 .vd-table thead {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -5712,7 +5640,7 @@ table {
 }
 .vd-table thead th {
   text-align: left;
-  padding: 16px 40px 16px;
+  padding: 16px 40px;
 }
 .vd-table thead tr {
   border-color: var(--hs-color-border-neutral-strong);
@@ -5896,7 +5824,7 @@ table {
   border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table--report > thead th {
-  padding: 16px 16px;
+  padding: 16px;
   background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-table--report > thead tr {
@@ -5912,7 +5840,7 @@ table {
   background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-table--report > tbody > tr > td {
-  padding: 16px 16px;
+  padding: 16px;
 }
 .vd-table--report > tfoot > tr > td {
   padding: 16px;
@@ -5960,7 +5888,7 @@ table {
 
 .vd-text--intro {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -5976,7 +5904,7 @@ table {
 
 .vd-toast-notification-container {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -6251,7 +6179,7 @@ td.vd-show-print {
     flex-direction: column;
   }
   .vd-next-stepper-header {
-    padding: 0 0 8px 0;
+    padding: 0 0 8px;
   }
   .vd-next-stepper-why {
     align-self: flex-end;
@@ -6376,7 +6304,7 @@ td.vd-show-print {
   word-break: break-word;
   color: var(--hs-color-fg-neutral-default);
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -6388,7 +6316,7 @@ td.vd-show-print {
 
 .vd-id-badge__description {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -6400,7 +6328,7 @@ td.vd-show-print {
 
 .vd-id-badge__status {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -6930,7 +6858,7 @@ td.vd-show-print {
 @media only screen and (max-width: 768px) {
   .vd-flex--responsive-column {
     flex-basis: auto;
-    margin: 0 0 24px 0;
+    margin: 0 0 24px;
   }
   .vd-flex--responsive-column:last-child {
     margin-bottom: 0;
@@ -7065,7 +6993,7 @@ td.vd-show-print {
 }
 .vd-datatable-row--footer .vd-datatable-cell {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -7082,7 +7010,7 @@ td.vd-show-print {
 
 .vd-datatable-head-cell {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -7097,7 +7025,7 @@ td.vd-show-print {
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -7189,7 +7117,7 @@ td.vd-show-print {
 
 .react-datepicker {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -7236,7 +7164,7 @@ td.vd-show-print {
 .react-datepicker__navigation--previous {
   left: -1px;
 }
-.react-datepicker__navigation--previous:before {
+.react-datepicker__navigation--previous::before {
   content: " ";
   visibility: visible;
   position: absolute;
@@ -7251,7 +7179,7 @@ td.vd-show-print {
 .react-datepicker__navigation--next {
   right: -10px;
 }
-.react-datepicker__navigation--next:before {
+.react-datepicker__navigation--next::before {
   content: " ";
   visibility: visible;
   position: absolute;
@@ -7547,7 +7475,7 @@ td.vd-show-print {
 }
 .vd-line-graph-container .vd-line-label {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -7560,7 +7488,7 @@ td.vd-show-print {
 }
 .vd-line-graph-container .vd-axis .tick text {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;
@@ -7965,7 +7893,7 @@ td.vd-show-print {
 }
 @media only screen and (max-width: 1000px) {
   .vd-table-list-expanded-content {
-    padding: 24px 24px 12px 24px;
+    padding: 24px 24px 12px;
   }
 }
 
@@ -7979,7 +7907,7 @@ td.vd-show-print {
 @media only screen and (max-width: 1000px) {
   .vd-table-list-expanded-actions {
     flex-basis: 100%;
-    padding: 12px 24px 12px 24px;
+    padding: 12px 24px;
   }
 }
 
@@ -8110,7 +8038,7 @@ td.vd-show-print {
 .pm-promotion-original-price {
   text-decoration: line-through;
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   word-break: break-word;