@use '../utilities';
@use '../components/form';

.cart-page {
  a {
    text-decoration: none;
  }

  .cart_totals {
    .product-name {
      display: flex;
      align-items: center;
      gap: utilities.space(1);
    }
  }

  h1,
  h2 {
    margin-bottom: utilities.space(4);
  }

  .return-to-shop {
    display: none;
  }

  .cart-reservations {
    margin-top: utilities.space(6);

    h2 {
      margin-bottom: utilities.space(3);
    }

    &__row {
      display: flex;
      align-items: center;
      gap: utilities.space(1);
      padding: utilities.space(2);
      border-bottom: 1px solid rgb(0 0 0 / 5%);

      &--header {
        font-weight: 700;
      }
    }

    &__cell {
      &--remove {
        flex: 0 0 auto;
        width: 3rem;
        text-align: center;
      }

      &--name {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: utilities.space(1);

        .product-thumbnail img {
          display: block;
          width: 4rem;
          height: 4rem;
          object-fit: cover;
        }
      }

      &--quantity,
      &--subtotal {
        flex: 0 0 8rem;
        text-align: center;
      }
    }

    .remove {
      border: none;
      background: transparent;
      color: #ff2e2e;
      cursor: pointer;
    }

    .cart-reservations-total {
      margin: utilities.space(3) 0;
    }

    .cart-reservations-message {
      margin: utilities.space(2) 0 utilities.space(4);
    }
  }
}

@media screen and (width >= 1280px) {
  .cart-page {
    .cart-collaterals {
      .cart_totals {
        width: 60%;
      }
    }
  }
}