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

  /* Trigger */
  .drawer-trigger {
    font: var(--font-body-md);

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

  /* Content */
  .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 */
    .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));

      .title {
        font: var(--font-body-lg);

        .total {
          font: var(--font-body-md);
        }
      }
    }

    /* Main */
    .main {
      flex: 2;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-24);
      padding: var(--spacing-24) calc(var(--spacing-24) - var(--spacing-2));

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

        .item {
          display: flex;
          gap: var(--spacing-16);

          & > [ui-link] {
            color: currentColor;
            font: var(--font-title-md);
          }

          .image {
            width: 90px;
            height: 90px;
            overflow: hidden;
            position: relative;
            border-radius: var(--radius-sm);
            background-color: var(--color-surface-container);

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border: 1px solid var(--color-surface-container);
            }

            & > [ui-icon] {
              opacity: 0.3;
              position: absolute;
              translate: -50% -50%;
              left: 50%;
              inset-block-start: 50%;
            }
          }

          .content {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .info {
              display: grid;
              gap: var(--spacing-16);
              grid-template-columns: auto auto;

              .bio {
                display: grid;
                gap: var(--spacing-8);

                .title {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  color: currentColor;
                  text-decoration: none;
                }

                .variants {
                  opacity: 0.8;
                  font: var(--font-body-sm);
                }
              }

              .price {
                opacity: 0.8;
                display: flex;
                justify-content: flex-end;
              }
            }

            .actions {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .quantity {
                display: flex;
                align-items: center;
                padding: var(--spacing-4);
                border-radius: var(--radius-xs);
                background-color: var(--color-surface-container-low);

                .value {
                  text-align: center;
                  width: var(--spacing-24);
                  font: var(--font-body-sm);
                }
              }
            }
          }
        }
      }

      .bundle-group {
        display: flex;
        gap: var(--spacing-16);
        flex-direction: column;

        .head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-block-end: var(--spacing-8);
          border-block-end: 1px dashed var(--color-surface-variant);

          .title {
            color: var(--color-on-surface-variant);
          }
        }

        .group {
          display: grid;
          gap: var(--spacing-16);

          .item {
            display: flex;
            align-items: center;
            gap: var(--spacing-8);
            justify-content: space-between;

            &:has(.free[hidden]) {
              order: -1;
            }

            .image {
              width: 50px;
              height: auto;
              overflow: hidden;
              aspect-ratio: 1 / 1;
              border-radius: var(--radius-sm);
            }

            .info {
              display: grid;
              gap: var(--spacing-4);
              flex: 1;

              .name {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: inherit;
                text-decoration: none;
              }

              .variants {
                opacity: 0.8;
                font: var(--font-body-sm);
              }
            }

            .price {
              display: grid;
              gap: var(--spacing-4);
              color: var(--color-primary);

              .compare-at {
                opacity: 0.5;
                text-decoration: line-through;
              }

              .free {
                color: var(--color-primary);
                background-color: var(--color-primary-container);
                padding: var(--spacing-4) var(--spacing-6);
                font: var(--font-body-sm);
                border-radius: var(--radius-xs);
                display: flex;
                align-items: center;
                gap: var(--spacing-4);
              }
            }
          }
        }
      }
    }

    /* Footer */
    .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));

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          opacity: 0.8;
        }

        .value {
          font: var(--font-body-lg);
        }
      }

      &::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"] {
      inset-inline-end: var(--spacing-12);
    }

    &[data-state="closed"] {
      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));
  }
}