ui-drawer {
  --drawer-width: 390px;

  /* Trigger */
}

ui-drawer .drawer-trigger {
    font: var(--font-body-md);

    /* Overlay */
  }

:is(ui-drawer .drawer-trigger):has( + .drawer-content[data-state="open"])::before {
        content: "";
        inset: 0;
        cursor: auto;
        z-index: 9998;
        position: fixed;
        background-color: var(--color-overlay);
      }

/* Content */

ui-drawer .drawer-content {
    cursor: auto;
    z-index: 9999;
    position: fixed;
    inset-block-end: var(--spacing-12);
    padding: var(--spacing-12);
    border-radius: var(--radius-md);
    width: var(--drawer-width);
    height: calc(100% - var(--spacing-24));
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-expressive-default-spatial);

    /* Header */
  }

:is(ui-drawer .drawer-content) .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
      padding: var(--spacing-12);
      padding-inline-start: calc(var(--spacing-24) - var(--spacing-2));
    }

:is(:is(ui-drawer .drawer-content) .header) .title {
        font: var(--font-body-lg);
      }

:is(:is(:is(ui-drawer .drawer-content) .header) .title) .total {
          font: var(--font-body-md);
        }

/* Main */

:is(ui-drawer .drawer-content) .main {
      flex: 2;
      overflow-y: auto;
      padding: var(--spacing-24) calc(var(--spacing-24) - var(--spacing-2));
    }

:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items {
        display: flex;
        gap: var(--spacing-24);
        flex-direction: column;
      }

:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item {
          display: flex;
          gap: var(--spacing-16);
        }

:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) > [ui-link] {
            color: currentColor;
            font: var(--font-title-md);
          }

:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .image {
            width: 90px;
            height: 90px;
            overflow: hidden;
            position: relative;
            border-radius: var(--radius-sm);
            background-color: var(--color-surface-container);
          }

:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .image) img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border: 1px solid var(--color-surface-container);
            }

:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .image) > [ui-icon] {
              opacity: 0.3;
              position: absolute;
              translate: -50% -50%;
              left: 50%;
              inset-block-start: 50%;
            }

:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }

:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .info {
              display: grid;
              gap: var(--spacing-16);
              grid-template-columns: auto auto;
            }

:is(:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .info) .bio {
                display: grid;
                gap: var(--spacing-8);
              }

:is(:is(:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .info) .bio) .title {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

:is(:is(:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .info) .bio) .variants {
                  opacity: 0.8;
                  font: var(--font-body-sm);
                }

:is(:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .info) .price {
                opacity: 0.8;
                display: flex;
                justify-content: flex-end;
              }

:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .actions {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }

:is(:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .actions) .quantity {
                display: flex;
                align-items: center;
                padding: var(--spacing-4);
                border-radius: var(--radius-xs);
                background-color: var(--color-surface-container-low);
              }

:is(:is(:is(:is(:is(:is(:is(ui-drawer .drawer-content) .main) .items,:is(:is(ui-drawer .drawer-content) .main) ui-cart-drawer-items) .item) .content) .actions) .quantity) .value {
                  text-align: center;
                  width: var(--spacing-24);
                  font: var(--font-body-sm);
                }

/* Footer */

:is(ui-drawer .drawer-content) .footer {
      position: relative;
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
      padding: calc(var(--spacing-24) - var(--spacing-2));
      display: grid;
      gap: calc(var(--spacing-24) - var(--spacing-2));
    }

:is(:is(ui-drawer .drawer-content) .footer) .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

:is(:is(:is(ui-drawer .drawer-content) .footer) .info) .label {
          opacity: 0.8;
        }

:is(:is(:is(ui-drawer .drawer-content) .footer) .info) .value {
          font: var(--font-body-lg);
        }

:is(:is(ui-drawer .drawer-content) .footer)::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 30px;
        inset-block-end: 99%;
        backdrop-filter: blur(0.5px);
        background: linear-gradient(to top, var(--color-background), transparent);
      }

[data-state="open"]:is(ui-drawer .drawer-content) {
      inset-inline-end: var(--spacing-12);
    }

[data-state="closed"]:is(ui-drawer .drawer-content) {
      inset-inline-end: calc(var(--drawer-width) * -1 - (var(--spacing-12) * 2));
    }

/* Responsive */
@media (max-width: 769px) {
  ui-drawer {
    --drawer-width: calc(100% - var(--spacing-24));
  }
}