@ebay/skin 19.18.0 → 19.19.0

package/dist/bundles/skin-full.css

@@ -949,14 +949,11 @@ a:not([href]),a[aria-disabled=true]{
 }
 .image-treatment:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .image-treatment>img{
   display:inline-block;
@@ -974,14 +971,11 @@ a:not([href]),a[aria-disabled=true]{
 }
 .image-treatment-large:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .image-treatment-large>img{
   display:inline-block;
@@ -998,7 +992,6 @@ a:not([href]),a[aria-disabled=true]{
   white-space:nowrap;
 }
 .scrollbars-permanent{
-  -webkit-overflow-scrolling:touch;
   scroll-behavior:smooth;
   scroll-snap-type:proximity;
   scroll-snap-type:x proximity;
@@ -1086,13 +1079,9 @@ ul.accordion--large summary.details__summary{
 .alert-dialog[role=alertdialog]{
   align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
+  inset:0;
   justify-content:center;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -1241,14 +1230,11 @@ ul.accordion--large summary.details__summary{
 }
 .avatar:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .avatar>img{
   display:inline-block;
@@ -1344,10 +1330,10 @@ ul.accordion--large summary.details__summary{
 }
 .badge{
   align-items:center;
-  background-color:var(--badge-background-color, var(--color-background-attention));
+  background-color:var(--color-background-attention);
   border:2px solid var(--color-border-on-attention);
   border-radius:16px;
-  color:var(--badge-foreground-color, var(--color-foreground-on-attention));
+  color:var(--color-foreground-on-attention);
   display:inline-flex;
   font-size:10px;
   height:16px;
@@ -2069,14 +2055,11 @@ button.card:hover{
 }
 .carousel__list--image-treatment>li:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .carousel__list--image-treatment>li>img{
   display:inline-block;
@@ -2094,14 +2077,11 @@ button.card:hover{
 }
 .carousel__list--image-treatment-large>li:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .carousel__list--image-treatment-large>li>img{
   display:inline-block;
@@ -2229,7 +2209,6 @@ span.carousel,span.carousel__container{
   }
   .carousel:not(.carousel__autoplay) .carousel__list{
     border-color:rgba(0, 0, 0, 0);
-    -webkit-overflow-scrolling:touch;
     overflow-x:auto;
     overflow-y:hidden;
     padding-bottom:10px;
@@ -2873,9 +2852,8 @@ span.combobox{
   width:38px;
 }
 .combobox__control button.icon-btn svg{
-  left:0;
+  inset:auto 0;
   margin:0;
-  right:0;
 }
 .combobox--expanded .combobox__listbox{
   display:block;
@@ -2985,13 +2963,9 @@ span.combobox{
 .confirm-dialog[role=dialog]{
   align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
+  inset:0;
   justify-content:center;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -3389,13 +3363,9 @@ details.details summary:focus:not(:focus-visible){
 .drawer-dialog[role=dialog]{
   align-items:flex-end;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
-  left:0;
+  inset:0;
   overflow:hidden;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -3488,9 +3458,8 @@ button.icon-btn.drawer-dialog__close{
   max-height:50%;
   max-width:100%;
   min-height:55px;
-  will-change:opacity, transform;
-  -webkit-overflow-scrolling:touch;
   overflow-y:hidden;
+  will-change:opacity, transform;
 }
 .drawer-dialog__window--expanded{
   height:95%;
@@ -4295,14 +4264,11 @@ a.filter-chip--expressive,button.filter-chip--expressive{
 }
 .filter-chip__media:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .filter-chip__media>img{
   display:inline-block;
@@ -5731,12 +5697,8 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
 /*! DEPRECATED COMPONENT. Will be removed next major version */
 .fullscreen-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
-  left:0;
-  -webkit-overflow-scrolling:touch;
+  inset:0;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -5752,10 +5714,9 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   flex:1 0 auto;
   flex-direction:column;
   min-height:55px;
-  will-change:opacity, transform;
-  -webkit-overflow-scrolling:touch;
   overflow-y:auto;
   width:100%;
+  will-change:opacity, transform;
 }
 .fullscreen-dialog__header{
   display:flex;
@@ -5866,16 +5827,16 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
   text-transform:uppercase;
 }
 .signal--trustworthy{
-  color:var(--signal-trustworthy-color, var(--color-foreground-accent));
+  color:var(--color-foreground-accent);
 }
 .signal--recent{
-  color:var(--signal-recent-color, var(--color-foreground-success));
+  color:var(--color-foreground-success);
 }
 .signal--time-sensitive{
-  color:var(--signal-time-sensitive-color, var(--color-foreground-attention));
+  color:var(--color-foreground-attention);
 }
 .signal--neutral{
-  color:var(--signal-neutral-color, var(--color-foreground-secondary));
+  color:var(--color-foreground-secondary);
 }
 svg.icon{
   display:inline-block;
@@ -7311,13 +7272,9 @@ span.inline-notice{
 .lightbox-dialog[role=dialog]{
   align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
+  inset:0;
   justify-content:center;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -8906,14 +8863,10 @@ nav.pagination--fluid ol.pagination__items li{
 }
 .panel-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
   flex-direction:column;
-  left:0;
+  inset:0;
   overflow:hidden;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -8927,10 +8880,9 @@ nav.pagination--fluid ol.pagination__items li{
   flex:1 0 auto;
   flex-direction:column;
   min-height:55px;
-  will-change:opacity, transform;
-  -webkit-overflow-scrolling:touch;
   overflow-y:auto;
   width:100%;
+  will-change:opacity, transform;
 }
 .panel-dialog__window--end{
   align-self:flex-end;
@@ -9227,10 +9179,8 @@ button.icon-btn.panel-dialog__prev{
   line-height:var(--spacing-300);
 }
 .progress-bar-expressive__message{
-  bottom:0;
-  left:0;
+  inset:auto 0 0;
   position:absolute;
-  right:0;
 }
 .progress-bar-expressive__message[role=status]{
   opacity:1;
@@ -10576,7 +10526,6 @@ span.switch__control:focus:not(:focus-visible){
 .table{
   overflow-x:auto;
   position:relative;
-  -webkit-overflow-scrolling:touch;
   scroll-behavior:smooth;
   scroll-snap-type:proximity;
   scroll-snap-type:x proximity;
@@ -10702,10 +10651,8 @@ span.switch__control:focus:not(:focus-visible){
   text-decoration:none;
 }
 .table--loading-state .progress-bar-expressive{
-  bottom:50%;
-  left:0;
+  inset:auto 0 50%;
   position:absolute;
-  right:0;
 }
 .table--mode-selection td:first-child,.table--mode-selection th:first-child{
   min-width:48px;
@@ -10844,11 +10791,11 @@ li.fake-tabs__item>a{
 div.tabs__item[role=tab]>span{
   padding:2px 0;
 }
-div.tabs__item[role=tab]>span,li.fake-tabs__item>a{
+div.tabs__item[role=tab],li.fake-tabs__item>a{
   color:var(--tabs-item-foreground-color, var(--color-foreground-secondary));
   display:inline-block;
 }
-div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
+div.tabs__item[role=tab]:after,li.fake-tabs__item>a:after{
   background-color:initial;
   border-radius:6px;
   content:"";
@@ -10858,19 +10805,25 @@ div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
   position:absolute;
   width:100%;
 }
-div.tabs__item[role=tab][aria-selected=true]>span,li.fake-tabs__item>a[aria-current]{
+div.tabs__item[role=tab][aria-selected=true],li.fake-tabs__item>a[aria-current]{
   color:var(--tabs-item-selected-foreground-color, var(--color-foreground-primary));
 }
-div.tabs__item[role=tab][aria-selected=true]>span:after,li.fake-tabs__item>a[aria-current]:after{
+div.tabs__item[role=tab][aria-selected=true]:after,li.fake-tabs__item>a[aria-current]:after{
   background-color:currentColor;
 }
 div.tabs__item[role=tab]:focus:not(:focus-visible),li.fake-tabs__item a:focus:not(:focus-visible){
   outline:none;
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
-  color:var(--tabs-item-hover-foreground-color, var(--color-foreground-secondary));
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true],div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover,li.fake-tabs__item>a:not([aria-current]):not([href]),li.fake-tabs__item>a:not([aria-current]):not([href]):focus,li.fake-tabs__item>a:not([aria-current]):not([href]):hover{
+  color:var(--color-foreground-disabled);
+}
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover:after,li.fake-tabs__item>a:not([aria-current]):not([href]):after,li.fake-tabs__item>a:not([aria-current]):not([href]):focus:after,li.fake-tabs__item>a:not([aria-current]):not([href]):hover:after{
+  background-color:initial;
+}
+div.tabs__item[role=tab]:not([aria-selected=true]):focus,div.tabs__item[role=tab]:not([aria-selected=true]):hover,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
+  color:var(--color-foreground-secondary);
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
+div.tabs__item[role=tab]:not([aria-selected=true]):focus:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
   background-color:currentColor;
 }
 .fake-tabs__cell,.tabs__cell{
@@ -11004,12 +10957,11 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   width:100%;
 }
 .toast-dialog{
-  background-color:var(--toast-dialog-background-color, var(--color-background-accent));
-  border-top-left-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
-  border-top-right-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
-  bottom:0;
+  background-color:var(--color-background-accent);
+  border-top-left-radius:var(--border-radius-100);
+  border-top-right-radius:var(--border-radius-100);
   box-shadow:0 0 3px rgba(0, 0, 0, .28);
-  left:0;
+  inset:auto 0 0;
   max-height:40vh;
   min-width:320px;
   position:fixed;
@@ -11019,7 +10971,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   z-index:2;
 }
 .toast-dialog,.toast-dialog a{
-  color:var(--toast-dialog-foreground-color, var(--color-foreground-on-success));
+  color:var(--color-foreground-on-success);
 }
 .toast-dialog a:focus{
   outline:1px auto currentColor;
@@ -11050,7 +11002,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 button.icon-btn.toast-dialog__close{
   align-self:flex-start;
   border:0;
-  color:var(--toast-dialog-foreground-color, var(--color-foreground-on-success));
+  color:var(--color-foreground-on-success);
   flex-shrink:0;
   margin-inline-start:auto;
   overflow:hidden;
@@ -11087,7 +11039,6 @@ button.icon-btn.toast-dialog__close>svg{
   text-decoration:underline;
 }
 .toast-dialog__footer button.btn--primary,.toast-dialog__footer button.btn--secondary{
-  border-color:var(--toast-dialog-foreground-color, var(--color-foreground-on-accent));
   overflow:hidden;
   position:relative;
 }
@@ -11108,17 +11059,18 @@ button.icon-btn.toast-dialog__close>svg{
   background-color:var(--color-state-layer-pressed);
 }
 .toast-dialog__footer button.btn--primary,.toast-dialog__footer button.btn--secondary{
+  border-color:var(--color-foreground-on-accent);
   border-style:solid;
   border-width:1px;
   outline-offset:2px;
 }
 .toast-dialog__footer button.btn--primary{
-  background-color:var(--toast-dialog-foreground-color, var(--color-background-primary));
-  color:var(--toast-dialog-background-color, var(--color-foreground-accent));
+  background-color:var(--color-background-primary);
+  color:var(--color-foreground-accent);
 }
 .toast-dialog__footer button.btn--secondary{
   background-color:initial;
-  color:var(--toast-dialog-foreground-color, var(--color-background-primary));
+  color:var(--color-background-primary);
   font-weight:700;
   margin-inline-end:var(--spacing-100);
 }
@@ -11127,7 +11079,7 @@ button.icon-btn.toast-dialog__close>svg{
 }
 @media (min-width:512px){
   .toast-dialog{
-    border-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
+    border-radius:var(--border-radius-100);
     bottom:var(--spacing-200);
     left:var(--spacing-200);
     max-width:480px;
@@ -11288,12 +11240,9 @@ button.icon-btn.toast-dialog__close>svg{
   width:100%;
 }
 .toggle-button--gallery-layout .toggle-button__image{
-  bottom:0;
   height:100%;
-  left:0;
+  inset:0;
   position:absolute;
-  right:0;
-  top:0;
   width:100%;
 }
 .toggle-button[aria-disabled=true] .toggle-button__icon,.toggle-button[aria-disabled=true] .toggle-button__image,.toggle-button[disabled] .toggle-button__icon,.toggle-button[disabled] .toggle-button__image{
@@ -11417,12 +11366,9 @@ button.icon-btn.toast-dialog__close>svg{
   width:100%;
 }
 .toggle-button-group--gallery-layout .toggle-button__image{
-  bottom:0;
   height:100%;
-  left:0;
+  inset:0;
   position:absolute;
-  right:0;
-  top:0;
   width:100%;
 }
 .toggle-button-group--gallery-layout .toggle-button__image-container img{