@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-cart {
  padding: 10px 0 40px 0;

  .header {
    @include font-style($font-sans, 700, $font-12);
    color: $gray;
    padding: 20px 0;
  }

  .item {
    @include font-style($font-sans, 400, $font-12);
    color: $gray;

    .item-col {
      border-bottom: 1px solid $black-alpha;
      padding-top: 20px;
      padding-bottom: 10px;

      .image-container {
        display: flex;
        background: $white;

        .image {
          display: block;
          width: 40%;
          margin: auto;
          padding: 5px;
        }
      }

      .name {
        display: block;
        @include font-style($font-serif, 500, $font-20);
        color: $brown;
        margin-bottom: 2px;
      }

      .remove {
        font-size: $font-22;
        padding: 0;
        background: none;
      }

      .qty-box {
        display: block;
        position: relative;
        height: 30px;
        width: 100%;
        max-width: 100px;
        background: $white;

        .qty-minus,
        .qty-plus {
          position: absolute;
          top: 50%;
          height: 30px;
          width: 20px;
          line-height: 30px;
          color: $gray;
          font-size:$font-16;
          text-align: center;
          transform: translateY(-50%);
          cursor: pointer;
          padding: 0;
        }
        .qty-minus {
          left: 5px;
        }
        .qty-plus {
          right: 5px;
        }

        .qty-input {
          position: absolute;
          top: 50%;
          left: 25px;
          height: 100%;
          width: calc(100% - 50px);
          text-align: center;
          transform: translateY(-50%);
          border: none;
          color: $brown;
          @include font-style($font-serif, 400, $font-18);
        }
      }
    }

    &:last-of-type {
      .item-col {
        border-bottom: none;
      }
    }
  }

  .place {
    display: flex;
    text-align: right;

    .total {
      display: block;
      @include font-style($font-sans, 700, $font-18);
      color: $gray;
      height: 34px;

      .price {
        @include font-style($font-serif, 400, $font-28);
        color: $brown;
        padding-left: 10px;
      }
    }

    .tax {
      display: block;
      @include font-style($font-sans, 400, $font-12);
      color: $gray;
    }

    .place-order {
      display: inline-block;
      @include font-style($font-serif, 'regular', $font-20);
      margin: 20px 0 0 auto;
    }
  }
}