@ebay/skin 19.10.0 → 19.12.0

package/dist/button/button.css

@@ -1,5 +1,7 @@
 a.fake-btn,
 button.btn {
+    align-content: center;
+    align-items: center;
     background-color: initial;
     border: 1px solid;
     border-radius: var(--btn-border-radius, 20px);
@@ -11,7 +13,7 @@ button.btn {
     margin: 0;
     min-height: 40px;
     min-width: 88px;
-    padding: 9.5px 20px;
+    padding: 0 20px;
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;
@@ -171,6 +173,8 @@ button.btn--primary {
         var(--color-foreground-on-accent)
     );
     font-weight: 700;
+    overflow: hidden;
+    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -178,6 +182,32 @@ a.fake-btn--primary:active,
 button.btn--primary:active {
     transform: scale(0.97);
 }
+a.fake-btn--primary:after,
+button.btn--primary:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--primary:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--primary[href]:hover:after,
+button.btn--primary:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--primary[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--primary:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--primary[href]:focus:after,
+button.btn--primary:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--primary[href]:focus:after {
+    background-color: var(--state-layer-focus);
+}
+a.fake-btn--primary:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--primary[href]:active:after,
+button.btn--primary:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--primary[href]:active:after {
+    background-color: var(--state-layer-pressed);
+}
 
 a.fake-btn--primary {
     outline-color: var(--color-foreground-primary);
@@ -190,18 +220,6 @@ a.fake-btn--primary:visited {
     );
 }
 
-a.fake-btn--primary[href]:focus,
-a.fake-btn--primary[href]:hover,
-button.btn--primary:not([disabled], [aria-disabled="true"]):focus,
-button.btn--primary:not([disabled], [aria-disabled="true"]):hover {
-    background-blend-mode: multiply;
-    filter: brightness(96%);
-}
-a.fake-btn--primary[href]:active,
-button.btn--primary:not([disabled], [aria-disabled="true"]):active {
-    filter: brightness(92%);
-}
-
 a.fake-btn--primary.fake-btn--destructive,
 button.btn--primary.btn--destructive {
     background-color: var(
@@ -217,38 +235,64 @@ button.btn--primary.btn--destructive {
         var(--color-foreground-on-attention)
     );
     font-weight: 700;
+    overflow: hidden;
+    position: relative;
 }
-
-button.btn--primary.btn--destructive[aria-disabled="true"],
-button.btn--primary.btn--destructive[disabled] {
-    background-color: var(
-        --btn-primary-destructive-disabled-background,
-        var(--color-background-disabled)
-    );
-    border-color: var(
-        --btn-primary-destructive-disabled-border,
-        var(--color-stroke-disabled)
-    );
+a.fake-btn--primary.fake-btn--destructive:after,
+button.btn--primary.btn--destructive:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
 }
-
-a.fake-btn--primary.fake-btn--destructive[href]:focus,
-a.fake-btn--primary.fake-btn--destructive[href]:hover,
+a.fake-btn--primary.fake-btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+a.fake-btn--primary.fake-btn--destructive[href]:hover:after,
 button.btn--primary.btn--destructive:not(
         [disabled],
         [aria-disabled="true"]
-    ):focus,
+    ):hover:after,
+button.btn--primary.btn--destructive[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--primary.fake-btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus:after,
+a.fake-btn--primary.fake-btn--destructive[href]:focus:after,
 button.btn--primary.btn--destructive:not(
         [disabled],
         [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-attention-hover);
+    ):focus:after,
+button.btn--primary.btn--destructive[href]:focus:after {
+    background-color: var(--state-layer-focus);
 }
-a.fake-btn--primary.fake-btn--destructive[href]:active,
+a.fake-btn--primary.fake-btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+a.fake-btn--primary.fake-btn--destructive[href]:active:after,
 button.btn--primary.btn--destructive:not(
         [disabled],
         [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-attention-active);
+    ):active:after,
+button.btn--primary.btn--destructive[href]:active:after {
+    background-color: var(--state-layer-pressed);
+}
+
+button.btn--primary.btn--destructive[aria-disabled="true"],
+button.btn--primary.btn--destructive[disabled] {
+    background-color: var(
+        --btn-primary-destructive-disabled-background,
+        var(--color-background-disabled)
+    );
+    border-color: var(
+        --btn-primary-destructive-disabled-border,
+        var(--color-stroke-disabled)
+    );
 }
 
 button.btn .progress-spinner {
@@ -279,12 +323,12 @@ button.btn[aria-expanded="true"] svg.icon--12 {
 
 a.fake-btn--large svg.icon,
 button.btn--large svg.icon {
-    max-height: 22px;
+    max-height: 48px;
 }
 
 a.fake-btn--small svg.icon,
 button.btn--small svg.icon {
-    max-height: 20px;
+    max-height: 32px;
 }
 
 button.btn--primary[aria-disabled="true"],
@@ -334,6 +378,8 @@ button.btn--secondary {
         --btn-secondary-foreground-color,
         var(--color-foreground-accent)
     );
+    overflow: hidden;
+    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -341,6 +387,32 @@ a.fake-btn--secondary:active,
 button.btn--secondary:active {
     transform: scale(0.97);
 }
+a.fake-btn--secondary:after,
+button.btn--secondary:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--secondary:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--secondary[href]:hover:after,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--secondary[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--secondary:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--secondary[href]:focus:after,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--secondary[href]:focus:after {
+    background-color: var(--state-layer-focus);
+}
+a.fake-btn--secondary:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--secondary[href]:active:after,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--secondary[href]:active:after {
+    background-color: var(--state-layer-pressed);
+}
 
 a.fake-btn--secondary:visited {
     color: var(
@@ -349,21 +421,6 @@ a.fake-btn--secondary:visited {
     );
 }
 
-a.fake-btn--secondary[href]:active,
-button.btn--secondary:not([disabled], [aria-disabled="true"]):active {
-    background-color: var(--color-state-primary-active);
-    border-color: var(--color-state-active-foreground-on-secondary);
-    color: var(--color-state-active-foreground-on-secondary);
-}
-a.fake-btn--secondary[href]:focus,
-a.fake-btn--secondary[href]:hover,
-button.btn--secondary:not([disabled], [aria-disabled="true"]):focus,
-button.btn--secondary:not([disabled], [aria-disabled="true"]):hover {
-    background-color: var(--color-state-primary-hover);
-    border-color: var(--color-state-hover-foreground-on-secondary);
-    color: var(--color-state-hover-foreground-on-secondary);
-}
-
 a.fake-btn--secondary.fake-btn--destructive,
 button.btn--secondary.btn--destructive {
     background-color: var(
@@ -380,32 +437,6 @@ button.btn--secondary.btn--destructive {
     );
 }
 
-a.fake-btn--secondary.fake-btn--destructive[href]:focus,
-a.fake-btn--secondary.fake-btn--destructive[href]:hover,
-button.btn--secondary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):focus,
-button.btn--secondary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-primary-hover);
-    border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
-    color: var(--color-state-hover-foreground-on-secondary-desctructive);
-}
-a.fake-btn--secondary.fake-btn--destructive[href]:active,
-button.btn--secondary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-primary-active);
-    border-color: var(
-        --color-state-active-foreground-on-secondary-desctructive
-    );
-    color: var(--color-state-active-foreground-on-secondary-desctructive);
-}
-
 button.btn--secondary.btn--destructive .progress-spinner {
     --color-spinner-icon-background: #f39fb0;
     --color-spinner-icon-foreground: #e0103a;
@@ -449,6 +480,8 @@ a.fake-btn--secondary[aria-disabled="true"] {
 a.fake-btn--tertiary,
 button.btn--tertiary {
     border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
+    overflow: hidden;
+    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -456,16 +489,31 @@ a.fake-btn--tertiary:active,
 button.btn--tertiary:active {
     transform: scale(0.97);
 }
-
-a.fake-btn--tertiary[href]:focus,
-a.fake-btn--tertiary[href]:hover,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):focus,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):hover {
-    background-color: var(--color-state-secondary-hover);
+a.fake-btn--tertiary:after,
+button.btn--tertiary:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--tertiary:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--tertiary[href]:hover:after,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--tertiary[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--tertiary:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--tertiary[href]:focus:after,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--tertiary[href]:focus:after {
+    background-color: var(--state-layer-focus);
 }
-a.fake-btn--tertiary[href]:active,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):active {
-    background-color: var(--color-state-secondary-active);
+a.fake-btn--tertiary:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--tertiary[href]:active:after,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--tertiary[href]:active:after {
+    background-color: var(--state-layer-pressed);
 }
 
 a.fake-btn--tertiary:not([href]),
@@ -492,26 +540,6 @@ button.btn--tertiary.btn--destructive {
     );
 }
 
-a.fake-btn--tertiary.fake-btn--destructive[href]:focus,
-a.fake-btn--tertiary.fake-btn--destructive[href]:hover,
-button.btn--tertiary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):focus,
-button.btn--tertiary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-secondary-hover);
-}
-a.fake-btn--tertiary.fake-btn--destructive[href]:active,
-button.btn--tertiary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-secondary-active);
-}
-
 button.btn--tertiary.btn--destructive[aria-disabled="true"],
 button.btn--tertiary.btn--destructive[disabled] {
     color: var(
@@ -530,7 +558,7 @@ button.btn--large {
     border-radius: var(--btn-border-radius, 24px);
     font-size: var(--font-size-medium);
     min-height: 48px;
-    padding: 13px 20px;
+    padding: 0 20px;
 }
 
 a.fake-btn--small,
@@ -538,7 +566,7 @@ button.btn--small {
     border-radius: var(--btn-border-radius, 16px);
     font-size: var(--font-size-default);
     min-height: 32px;
-    padding: 6px 16px;
+    padding: 0 16px;
 }
 
 a.fake-btn--form,
@@ -546,25 +574,42 @@ button.btn--form {
     border-color: inherit;
     border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
     max-width: 100%;
+    overflow: hidden;
+    position: relative;
 }
-
-a.fake-btn--form:not([href]):focus,
-a.fake-btn--form:not([href]):hover,
-button.btn--form:not([disabled], [aria-disabled="true"]):focus,
-button.btn--form:not([disabled], [aria-disabled="true"]):hover {
-    background-color: var(--color-state-primary-hover);
+a.fake-btn--form:after,
+button.btn--form:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--form:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--form[href]:hover:after,
+button.btn--form:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--form[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--form:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--form[href]:focus:after,
+button.btn--form:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--form[href]:focus:after {
+    background-color: var(--state-layer-focus);
 }
-a.fake-btn--form:not([href]):active,
-button.btn--form:not([disabled], [aria-disabled="true"]):active {
-    background-color: var(--color-state-primary-active);
+a.fake-btn--form:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--form[href]:active:after,
+button.btn--form:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--form[href]:active:after {
+    background-color: var(--state-layer-pressed);
 }
 
 button.btn--form.btn--large {
-    padding: 13px 20px;
+    padding: 0 20px;
 }
 
 button.btn--form.btn--small {
-    padding: 6px 16px;
+    padding: 0 16px;
 }
 a.fake-btn--transparent,
 a.fake-btn--transparent:focus,
@@ -575,16 +620,10 @@ button.btn--transparent:hover {
     background-color: initial;
 }
 
-a.fake-btn--fixed-height,
-button.btn--fixed-height {
-    padding-top: calc(21.5px - 0.75em);
-}
-
 a.fake-btn--large-fixed-height,
 button.btn--large-fixed-height {
     height: 48px;
     min-height: 48px;
-    padding-top: calc(27px - 0.75em);
 }
 
 a.fake-btn--truncated,
@@ -602,7 +641,7 @@ button.btn--large-truncated {
     font-size: var(--font-size-medium);
     height: 48px;
     min-height: 48px;
-    padding: 13px 20px;
+    padding: 0 20px;
 }
 a.fake-btn--large-truncated,
 a.fake-btn--large-truncated span,
@@ -627,11 +666,6 @@ button.btn--split-end {
     padding-left: 8px;
     padding-right: 8px;
 }
-
-a.fake-btn.fake-btn--tertiary.fake-btn--split-end,
-button.btn.btn--tertiary.btn--split-end {
-    margin-left: -2px;
-}
 a.fake-btn.fake-btn--primary.fake-btn--split-end,
 a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,
 a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,

package/dist/carousel/carousel.css

@@ -280,7 +280,8 @@ span.carousel__container {
     }
     .carousel__snap-point {
         scroll-snap-align: flex-start;
-        scroll-snap-coordinate: 0 0;
+        -webkit-scroll-snap-coordinate: 0 0;
+        -ms-scroll-snap-coordinate: 0 0;
     }
     @media (min-width: 512px) {
         div.carousel {

package/dist/cta-button/cta-button.css

@@ -1,4 +1,6 @@
 a.cta-btn {
+    align-content: center;
+    align-items: center;
     background-color: var(
         --cta-btn-background-color,
         var(--color-background-primary)
@@ -12,7 +14,8 @@ a.cta-btn {
     font-size: var(--font-size-default);
     margin: 0;
     max-width: 100%;
-    padding: 9.5px 20px;
+    min-height: 40px;
+    padding: 0 20px;
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;

package/dist/drawer-dialog/drawer-dialog.css

@@ -1,4 +1,5 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgb(17 24 32 / 0);
     --dialog-scrim-color-show: rgb(17 24 32 / 0.7);

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -1,4 +1,5 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgb(17 24 32 / 0);
     --dialog-scrim-color-show: rgb(17 24 32 / 0.7);

package/dist/menu/menu.css

@@ -148,6 +148,35 @@ div.menu__item--badged[role^="menuitem"] span.badge {
     z-index: 1;
 }
 
+.menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--unchecked,
+.menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--unchecked {
+    display: none;
+}
+.menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checked,
+.menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--checked {
+    display: block;
+}
+.menu__item[role="menuitemcheckbox"] svg.icon--unchecked {
+    color: var(--color-foreground-secondary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemcheckbox"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemradio"] svg.icon--unchecked {
+    color: var(--color-foreground-primary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemradio"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+
 .menu__items--scroll[role="menu"] {
     overflow-y: scroll;
 }
@@ -180,6 +209,22 @@ hr.menu__separator {
     border-style: solid;
     border-width: 1px;
 }
+
+.menu__footer {
+    align-items: center;
+    background-color: var(--color-background-elevated);
+    border: none;
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-200);
+}
+
+.menu--filter div.menu__item[role^="menuitem"] {
+    justify-content: flex-start;
+}
 div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

package/dist/menu-button/menu-button.css

@@ -160,6 +160,39 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 
+.menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--unchecked,
+.menu-button__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--unchecked {
+    display: none;
+}
+.menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--checked,
+.menu-button__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--checked {
+    display: block;
+}
+.menu-button__item[role="menuitemcheckbox"] svg.icon--unchecked {
+    color: var(--color-foreground-secondary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemcheckbox"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemradio"] svg.icon--unchecked {
+    color: var(--color-foreground-primary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemradio"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
     background-color: initial;
@@ -289,6 +322,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,
 .menu-button .btn[aria-expanded="true"] ~ .menu-button__menu,
 .menu-button .expand-btn[aria-expanded="true"] ~ .menu-button__menu,
+.menu-button .filter-chip[aria-expanded="true"] ~ .menu-button__menu,
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu {
     display: block;
 }
@@ -298,6 +332,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .expand-btn ~ .menu-button__menu--static,
 .expand_btn ~ .fake-menu-button__menu--static,
 .fake-menu-button__button ~ .fake-menu-button__menu--static,
+.filter-chip ~ .fake-menu-button__menu--static,
 .menu-button__button ~ .menu-button__menu--static {
     position: static;
 }
@@ -315,6 +350,22 @@ hr.menu-button__separator {
     border-width: 1px;
     margin: 0;
 }
+
+.menu-button__footer {
+    align-items: center;
+    background-color: var(--color-background-elevated);
+    border: none;
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-200);
+}
+
+.menu-button--filter div.menu-button__item[role^="menuitem"] {
+    justify-content: flex-start;
+}
 div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

package/dist/mixins/_animation-mixins.scss

@@ -1,41 +1,2 @@
-@mixin chevron-keyframes() {
-    @keyframes chevron-bounce-open {
-        0% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(-7px);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes chevron-bounce-close {
-        0% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(7px);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-}
-
-// This is used for when the animations are loading so that there are no animations happening on page load.
-@mixin loading() {
-    animation: none;
-    transition: none;
-}
-
-@mixin chevron-open() {
-    animation: chevron-bounce-open var(--motion-duration-medium-1)
-        var(--motion-easing-standard) var(--motion-duration-short-1);
-}
-
-@mixin chevron-close() {
-    animation: chevron-bounce-close var(--motion-duration-medium-1)
-        var(--motion-easing-standard);
-}
+// Deprecated, use animation instead
+@forward "./animation";