@layer snippets{
  ui-express-checkout{
    display:grid;
    align-items:start;
    grid-gap:var(--spacing-12);
    gap:var(--spacing-12);
  }
  ui-express-checkout ui-linked-fields{
    display:contents;
    gap:var(--spacing-12);
  }
  ui-express-checkout [ui-express-checkout=field]{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  ui-express-checkout [ui-express-checkout=field]::after{
    content:attr(error-message);
    color:var(--color-error);
  }
  @media (min-width: 769.02px){
    ui-express-checkout{
      grid-template-columns:repeat(2, 1fr);
    }
    ui-express-checkout > *:last-child:nth-child(odd){
      grid-column:1/3;
    }
    ui-express-checkout ui-linked-fields > *:last-child:nth-child(odd){
      grid-column:1/3;
    }
  }
  .express-checkout-default{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-24);
  }
  .express-checkout-default .actions{
    display:grid;
    grid-gap:var(--spacing-12);
    gap:var(--spacing-12);
    grid-template-columns:min-content auto;
  }
  .express-checkout-default .actions:has(> ui-shop-button:nth-of-type(2)) > ui-shop-button:last-of-type{
    grid-column:1/3;
  }
  .express-checkout-default .actions:not(:has(.quantity)){
    grid-template-columns:1fr;
  }
  .express-checkout-drawer [ui-slot=sheet-body]{
    display:flex;
    flex-direction:column;
    gap:calc(var(--spacing-16) + var(--spacing-4));
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order{
    display:flex;
    gap:var(--spacing-16);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .image{
    width:100px;
    height:100px;
    overflow:hidden;
    border-radius:var(--radius-12);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding-block:var(--spacing-4);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .info{
    display:grid;
    grid-gap:var(--spacing-4);
    gap:var(--spacing-4);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .info .price{
    color:var(--color-primary);
    font:var(--font-body-lg);
  }
  .express-checkout-drawer [ui-slot=sheet-footer] ui-quantity{
    display:none;
  }
  ui-phone-validation [ui-phone-validator=input-wrapper]{
    display:flex;
    width:100%;
    height:40px;
    overflow:hidden;
    transition:all var(--transition-standard-default-spatial);
    border-radius:var(--radius-input);
    outline:2px solid transparent;
    outline-offset:1px;
    background-color:var(--color-surface-container-low);
  }
  ui-phone-validation [ui-phone-validator=input-wrapper]:has([ui-phone-validator=number]:focus){
    outline-color:color-mix(in oklab, currentcolor 10%, transparent);
  }
  ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries]{
    position:relative;
    flex-shrink:0;
    width:75px;
    border-inline-end:1px solid var(--color-surface-container-highest);
  }
  ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries] [ui-phone-validator=displayed-country-code]{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--spacing-8);
    width:100%;
    height:100%;
    padding-inline:var(--spacing-12) var(--spacing-8);
    color:var(--color-primary);
    font:var(--font-body-md);
    pointer-events:none;
  }
  ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries] [ui-phone-validator=displayed-country-code]::after{
    content:"";
    flex-shrink:0;
    width:6px;
    height:6px;
    transform:translate(-1.5px, -1.5px) rotate(45deg);
    border-right:1.2px solid color-mix(in srgb, var(--color-on-surface) 38%, transparent);
    border-bottom:1.2px solid color-mix(in srgb, var(--color-on-surface) 38%, transparent);
  }
  ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries] [ui-phone-validator=select-country-code]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
  }
  ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=number]{
    flex:1;
    height:100%;
    border:none;
    border-radius:var(--radius-0);
    outline:none;
    background-color:transparent;
    box-shadow:none;
  }
  ui-phone-validation [ui-phone-validator=error]{
    color:var(--color-error);
    font:var(--font-body-sm);
  }
  ui-phone-validation [ui-phone-validator=error][data-hidden=true]{
    display:none;
  }
}