.shopping-cart {
  &-header {
    font-size: font-px-to-rem(18px);
    margin-bottom: 0;
    color: theme-color("dark-text");
    @include media-breakpoint-up(sm) {
      font-size: font-px-to-rem(34px);
      margin-top: 17.5px;
      margin-bottom: 28px;
    }
    @include media-breakpoint-up(lg) {
      font-size: font-px-to-rem(32px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  &-empty {
    &-image {
      color: $primary-color;
      margin-top: 64px;
      margin-bottom: 25px;
      @include media-breakpoint-up(sm) {
        width: 144.3px;
        height: 160px;
        margin-top: 35.6px;
        margin-bottom: 66.9px;
      }
      @include media-breakpoint-up(lg) {
        width: 219px;
        height: 243px;
        margin-top: 103px;
        margin-bottom: 66px;
      }
    }
    &-info {
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(18px);
        letter-spacing: 0.45px;
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(20px);
      }
    }
    &-continue-link {
      margin-top: 100px;
      margin-bottom: 30px;
      @include media-breakpoint-up(sm) {
        padding: 20px 12px;
        width: 100%;
        margin-top: 50px;
        line-height: 1.11;
        font-size: font-px-to-rem(28px);
        align-self: center;
      }
      @include media-breakpoint-up(lg) {
        padding: 6px 12px;
        margin-top: 60px;
        margin-bottom: 90px;
        width: 517px;
        line-height: 65px;
        font-size: font-px-to-rem(22px);
        align-self: center;
      }
    }
  }
  &-table {
    margin-bottom: 27px;
    @include media-breakpoint-up(lg) {
      margin-top: 70px;
    }
    &-header {
      font-weight: 500;
      color: theme-color("secondary");
      .d-table-cell {
        border-top: none;
        border-bottom: 1px solid $global-border-style;
        padding: 7px 0;
      }
    }
    &-line-items {
      display: table-row-group;
      .d-table-cell,
      .d-lg-table-cell {
        &:first-child {
          padding: 22px 16px 22px 0;
          vertical-align: top;
          @include media-breakpoint-up(sm) {
            padding-right: 29.9px;
          }
          @include media-breakpoint-up(lg) {
            padding-right: 16px;
          }
        }
        &:last-child {
          @include media-breakpoint-up(lg) {
            padding: 40px 0 22px 16px;
          }
        }
        border-top: none;
        border-bottom: 1px solid $global-border-style;
        padding: 22px 0;
        vertical-align: top;
        @include media-breakpoint-up(lg) {
          padding: 22px 50px 0 0;
          vertical-align: middle;
        }
      }
    }
  }
  &-item {
    .item-title {
      margin-bottom: 5px;
      @include media-breakpoint-up(lg) {
        margin-bottom: 14px;
      }
    }

    &-image {
      width: 120px;
      text-align: center;
      @include media-breakpoint-up(lg) {
        width: 190px;
        height: 246px;
      }

      img {
        width: 100%;
        @include media-breakpoint-up(sm) {
          width: auto;
        }
      }
    }
    &-description {
      h2 {
        font-size: font-px-to-rem(14px);
        @include media-breakpoint-up(sm) {
          font-size: font-px-to-rem(22px);
          font-weight: 500;
        }
        @include media-breakpoint-up(lg) {
          font-size: font-px-to-rem(26px);
          font-weight: 500;
        }
        a {
          color: theme-color("dark-text");
        }
      }

      .item-details-list {
        padding: 0;
        list-style-type: none;
        margin: 9px 0 13.8px;
      }

      .item-details {
        text-transform: uppercase;
        font-size: font-px-to-rem(12px);
        font-weight: 500;
        line-height: 1.4;
        @include media-breakpoint-up(sm) {
          font-size: font-px-to-rem(14px);
          margin-top: 3px;
          margin-bottom: 3px;
        }
        @include media-breakpoint-up(lg) {
          font-size: font-px-to-rem(12px);
          margin: 0;
        }
      }
    }
    &-price {
      font-size: font-px-to-rem(14px);
      font-weight: 600;
      line-height: 1;
      margin-bottom: 28px;
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(24px);
        letter-spacing: 0.6px;
        margin-bottom: 74px;
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(26px);
        font-weight: 500;
        letter-spacing: normal;
        margin-bottom: 28px;
      }
    }
    &-quantity {
      float: left;
      @include media-breakpoint-up(lg) {
        float: none;
      }
      input {
        padding: 0;
        width: 40px;
        height: 25px;
        font-size: font-px-to-rem(14px);
        border-color: theme-color("borders");
        z-index: 1;
        @include media-breakpoint-up(sm) {
          width: 60px;
          height: 51.4px;
          font-size: font-px-to-rem(25px);
          font-weight: 500;
        }
        @include media-breakpoint-up(lg) {
          width: 60px;
          height: 45px;
          font-size: font-px-to-rem(20px);
        }
      }
      input[type="number"]::-webkit-outer-spin-button,
      input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type="number"] {
        -webkit-appearance: none;
        -moz-appearance: textfield;
        appearance: none;
      }
      button {
        font-size: font-px-to-rem(14px);
        height: 25px;
        background-color: $input-background;
        border-color: theme-color("borders");
        border-width: 1px !important;
        border-style: solid;
        color: color-yiq($input-background);
        touch-action: manipulation;
        @include media-breakpoint-up(sm) {
          height: 51.4px;
          font-size: font-px-to-rem(24px);
          font-weight: 500;
          padding: 0 23.9px;
        }
        @include media-breakpoint-up(lg) {
          height: 45px;
          font-size: font-px-to-rem(20px);
          padding: 1px 15px 2px;
        }
      }
    }
    &-total {
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(26px);
        font-weight: 500;
      }
    }
    &-delete {
      float: right;
      @include media-breakpoint-up(sm) {
        margin-top: 5px;
      }
      @include media-breakpoint-up(lg) {
        float: none;
        margin-top: 0;
      }
      &-icon {
        @include media-breakpoint-up(sm) {
          width: 33.2px;
          height: 37.3px;
        }
        @include media-breakpoint-up(lg) {
          width: 24px;
          height: 27px;
        }
        .cls-2 {
          clip-path: initial;
        }
      }
    }
  }
  &-coupon-code {
    margin-bottom: 30px;
    @include media-breakpoint-up(lg) {
      flex-basis: 49%;
    }
    .form-control {
      font-size: font-px-to-rem(14px);
      border: 1px solid theme-color("borders");
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(26px);
        height: 71.1px;
        padding: 19px 20.7px;
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(18px);
        height: 65px;
        padding: 20px 28px;
      }
      &.disabled {
        pointer-events: none;
      }
      &.error {
        border: 1px solid theme-color("danger");
      }
    }
    .btn.remove {
      svg {
        height: 14px;
      }
    }
    button {
      background: $input-background;
      font-size: font-px-to-rem(20px);
      line-height: 13px;
      border: 1px solid theme-color("borders");
      color: color-yiq($input-background);
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(36px);
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(26px);
        .spree-icon {
          width: 15px;
          height: 12px;
        }
      }
      &.disabled {
        pointer-events: none;
      }
      &.error {
        border: 1px solid theme-color("danger");
      }
    }
    .alert-success {
      color: theme-color("success");
      background-color: theme-color("light-background");
      font-size: font-px-to-rem(12px);
      margin-top: 10px;
      flex-basis: 100%;
      margin-bottom: 0;
    }
    .alert-error {
      color: theme-color("danger");
      font-size: font-px-to-rem(12px);
      margin-top: 10px;
      flex-basis: 100%;
      margin-bottom: 0;

      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(19px);
      }

      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(12px);
      }

      img {
        width: 16px;
        margin-right: 10px;
        vertical-align: bottom;
        @include media-breakpoint-up(sm) {
          width: 33.2px;
        }
        @include media-breakpoint-up(lg) {
          width: 16px;
        }
      }
    }
    input[type="text"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
  }
  &-total {
    margin-top: 28px;
    margin-bottom: 17px;
    @include media-breakpoint-up(sm) {
      margin-top: 60px;
      margin-bottom: 36.2px;
    }
    @include media-breakpoint-up(lg) {
      flex-basis: 50%;
      margin-top: 0;
      margin-bottom: 34px;
    }
    &-text {
      font-size: font-px-to-rem(14px);
      color: theme-color("secondary");
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(25px);
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(32px);
        color: theme-color("dark-text");
        margin-right: 35px;
      }
    }
    &-amount {
      color: theme-color("dark-text");
      font-weight: 600;
      letter-spacing: 1.05px;
      font-size: font-px-to-rem(22px);
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(42px);
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(32px);
      }
    }
  }
  &-buttons {
    margin-bottom: 28px;
    @include media-breakpoint-up(lg) {
      flex-basis: 49%;
      margin-bottom: 100px;
    }
    &-checkout {
      font-size: font-px-to-rem(17px);
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(28px);
        height: 74.4px;
      }
      @include media-breakpoint-up(lg) {
        font-size: font-px-to-rem(22px);
        height: 65px;
      }
    }
    &-continue {
      font-size: font-px-to-rem(14px);
      font-weight: 700;
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(28px);
        padding-top: 19.8px;
        padding-bottom: 19.8px;
        line-height: 1;
      }
      @include media-breakpoint-up(lg) {
        text-decoration: underline;
        color: theme-color("dark-text");
        font-weight: 500;
        font-size: font-px-to-rem(16px);
        letter-spacing: 0.4px;
        padding: 0;
        &:hover,
        &:focus {
          color: theme-color("dark-text");
        }
      }
    }
    &-or {
      margin: 27px 0;
      font-size: font-px-to-rem(14px);

      display: table;
      white-space: nowrap;
      position: relative;
      width: 100%;
      &:before,
      &:after {
        border-top: 1px solid $global-border-style;
        content: "";
        display: table-cell;
        position: absolute;
        top: 47%;
        width: 45%;
      }
      &:before {
        right: 0;
      }
      &:after {
        left: 0;
      }

      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(25px);
      }
    }
  }
}

#cart .alert {
  display: none;
}