@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: 10px;
      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;
      }
    }

    &: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;
    }
  }
}