body {
  &[data-bigthirst-open] {
    overflow: hidden;
  }
}

[data-bigthirst-modal] {
  --cart-width: 487px;

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;

  display: none;
  pointer-events: none;
  z-index: -1;

  &.active {
    display: block;
    pointer-events: auto;
    z-index: 9999;
  }

  [data-bigthirst-backdrop] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c-brand-umber-35);
    transition: opacity 0.2s ease-in-out;

    opacity: 0;
    pointer-events: none;
    z-index: -1;

    &.visible {
      opacity: 1;
      pointer-events: auto;
      z-index: 999;
    }
  }

  [data-bigthirst-dialog] {
    width: var(--cart-width);
    max-width: 100%;
    background-color: var(--c-brand-buff);
    border-left: 1px solid var(--c-brand-umber);
    box-shadow: none;
  }

  .shopify-buy__cart__header {
    border-bottom: 1px solid var(--c-brand-umber);
    padding: 0;
  }

  .shopify-buy__cart__title {
    color: var(--c-brand-teal);
    font-family: var(--font-family-heading);
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1;
    padding-inline: 20px;
  }

  [data-bigthirst-dismiss] {
    width: 64px;
    height: 64px;
    color: var(--c-brand-umber);
    padding: 18px;

    &:hover {
      scale: 1;

      path {
        &.line-a {
          rotate: -45deg;
        }

        &.line-b {
          rotate: 45deg;
        }
      }
    }

    svg {
      fill: var(--c-brand-umber);

      path {
        transform-origin: center;
        transition: rotate 0.2s ease-in-out;
      }
    }
  }

  .shopify-buy__cart-scroll {
    padding: 20px;
    padding-right: 48px;
  }

  .shopify-buy__cart-items {
    display: flex;
    flex-direction: column;
    gap: 48px;

    .shopify-buy__cart-item {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
      transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;

      &.line-item-remove {
        overflow: hidden;
        opacity: 0;
        max-height: 0;
      }

      .shopify-buy__cart-item__image {
        aspect-ratio: 1 / 2;
        width: 88px;
        height: 100%;
      }

      .shopify-buy__cart-item__title {
        color: var(--c-brand-umber);
        font-family: var(--font-family-heading);
        font-size: 24px;
        text-transform: uppercase;
        line-height: 1.15;
      }

      .shopify-buy__cart-item__price {
        color: var(--c-brand-umber-75);
        font-family: var(--font-family-body);
        font-size: 22px;
        line-height: 1;
      }

      .shopify-buy__quantity-container {
        .shopify-buy__btn--seamless {
          width: 50px;
          height: 50px;
          border: 1px solid var(--c-brand-umber);
          transition: all 0.2s ease-in-out;

          &:hover {
            background-color: transparent;
            opacity: 0.5;
          }

          > svg {
            fill: var(--c-brand-umber);
            pointer-events: none;
            width: 17px;
            height: 17px;
          }
        }

        .line-item-quantity {
          display: flex;
          align-items: center;
        }

        .shopify-buy__quantity {
          color: var(--c-brand-umber);
          font-family: var(--font-family-body);
          font-size: 22px;
          line-height: 1;
        }
      }
    }
  }

  .shopify-buy__cart-bottom {
    row-gap: 20px;
    border-top: 1px solid var(--c-brand-umber);
    padding-inline: 16px;
    padding-block: 40px;
  }

  .shopify-buy__cart__subtotal__text {
    color: var(--c-brand-umber);
    font-family: var(--font-family-heading);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1;
  }

  .shopify-buy__cart__subtotal__price {
    color: var(--c-brand-umber-75);
    font-family: var(--font-family-body);
    font-size: 22px;
    line-height: 1;
  }

  .shopify-buy__btn--cart-checkout {
    color: var(--c-brand-buff);
    font-family: var(--font-family-button);
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1;
    background-color: var(--c-brand-teal);
    padding-inline: 48px;
    padding-block: 24px;

    &:hover {
      background-color: var(--c-brand-umber);
    }
  }
}