// CART SIDEBAR
.cart-sidebar-container {
  width: 320px;
  height: 100vh;
  overflow: auto;
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4;
  padding: 25px;
  transition: all 0.3s;
  transform: translateX(200%);

  &.active {
    transform: translateX(0%);
  }

  .header {
    margin-bottom: 40px;
    position: relative;
    .title {
      font-size: 18px;
      text-transform: uppercase;
    }
    .toggle-cart-sidebar {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }

  .body {
    border-bottom: 2px solid $title-color;
    ul.cart-list {
      li {
        margin-bottom: 30px;
        p {
          margin-bottom: 0;
          &.product-name {
            text-transform: uppercase;
            font-size: 14px;
            font-weight: bold;
          }
          &.options {
            font-size: 14px;
            color: $disabled-color;
            margin-bottom: 5px;
          }
          &.subtotal {
            span {
              display: inline-block;
            }
            .multi,
            .equal {
              margin: 0 5px;
            }
          }
        }
      }
    }
  }

  .footer {
    padding-bottom: 30px;
    .total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
    }
    .action-btns {
      .action-btn {
        display: block;
        margin-bottom: 20px;
        padding: 8px 15px;
        text-align: center;
        opacity: 0.8;
        &:hover {
          opacity: 1;
        }
        &:last-child {
          margin-bottom: 0;
        }
        &.goto-cart {
          background-color: $dark-color;
          color: #fff;
          border: 1px solid $dark-color;
        }
        &.remove-cart {
          background-color: $highlight-color-red;
          color: #fff;
          border: 1px solid $highlight-color-red;
        }
      }
    }
  }

}
// END CART SIDEBAR



// CART PAGE

.cart-page {
  .cart-container {
    .cart-item {
      margin-bottom: 20px;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .remove-cart-item {
      cursor: pointer;
      position: absolute;
      top: 5px;
      right: 5px;
    }
    .cart-item-container {
      display: flex;
      // align-items: center;

      .item-image {
        margin-right: 20px;
        max-width: 90px;
        img {
          max-width: 100%;
        }
      }

      .item-info {
        padding: 4px 0;
        .name,
        .price,
        .options,
        .quantity {
          display: block;
        }
        .name {
          font-size: 18px;
          font-weight: bold;
        }
        .options {
          margin-bottom: 8px;
        }
        .quantity {
          width: 45px;
          padding: 4px;
          text-align: center;
          background-color: $gray-color2;
        }
      }

      .item-subtotal {
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-left: auto;
      }

      .cart-total {
        margin-left: auto;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .action-buttons {
    margin-top: 30px;
    text-align: right;
    a {
      display: inline-block;
      padding: 8px;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

// END CART PAGE