.table-cart {
  &__header {
    display: flex;
    @include media-breakpoint-up(sm) {
      border-bottom: 1px solid #f1f1f1;
    }
    .title {
      font-size: 18px;
      font-weight: 500;
      @include media-breakpoint-up(sm) {
        display: none;
      }
    }
    &-column {
      flex-basis: 50%;
      color: #999999;
      padding: 10px 0px;
      font-weight: 500;
      display: none;
      &:nth-child(1) {
        padding-left: 5%;
      }
      &:nth-child(2) {
        text-align: center;
      }
      &:nth-child(3) {
        text-align: right;
        padding-right: 0;
      }
      @include media-breakpoint-up(sm) {
        display: block;
      }
    }
  }
  &__item {
    display: flex;
    border: 1px solid #f1f1f1;
    margin-bottom: 10px;
    @include media-breakpoint-up(sm) {
      margin-bottom: 0;
    }
    @include media-breakpoint-up(sm) {
      border: none;
      border-bottom: 1px solid #f1f1f1;
    }
  }
  &__image-holder {
    flex-basis: 50%;
    align-self: center;
    padding: 10px;
    @include media-breakpoint-up(sm) {
      flex-basis: 15%;
    }
    img {
      width: 100%;
      max-height: 100%;
    }
  }
  &__details {
    flex-basis: 100%;
    align-self: center;
    padding: 10px;
    @include media-breakpoint-up(sm) {
      padding-right: 0;
      display: flex;
    }
    .wrapper {
      flex-basis: 100%;

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      &:nth-child(3) {
        @include media-breakpoint-up(sm) {
          text-align: right;
        }
      }
    }

    .wrapper:nth-child(2) {
      @include media-breakpoint-up(sm) {
        padding-left: 10px;
      }

      @include media-breakpoint-up(md) {
        padding-left: 40px;
      }

      @include media-breakpoint-up(lg) {
        padding-left: 80px;
      }

      @include media-breakpoint-up(xl) {
        padding-left: 8%;
      }

      .select {
        width: 75px;
      }
    }

    .title,
    .sub-title {
      margin: 0;
    }
    .title {
      font-size: 18px;
      font-weight: 500;
    }
    .select {
      width: 150px;
      select {
        background-color: #f1f1f1;
      }
    }
    .list {
      a {
        color: #00aaee;
        font-weight: 500;
      }
    }
    .sub-title {
      color: #28a745;
      font-weight: 500;
    }
    .price {
      font-size: 16px;
      font-weight: 600;
      @include media-breakpoint-up(sm) {
        font-size: 18px;
        display: block;
      }
    }
    .sub-price {
      color: #999999;
      font-weight: 500;
    }
  }
  &__footer {
    display: flex;
    .title {
      font-size: 14px;
      font-weight: 600;
    }
    .price {
      margin: 0;
    }

    .wrapper {
      padding: 0 10px;

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      &:nth-child(2) {
        display: flex;

        @include media-breakpoint-up(sm) {
          padding-left: 5px;
        }

        @include media-breakpoint-up(md) {
          padding-left: 25px;
        }

        @include media-breakpoint-up(lg) {
          padding-left: 60px;
        }

        @include media-breakpoint-up(xl) {
          padding-left: 6%;
        }
      }
      @include media-breakpoint-up(sm) {
        &:first-child {
          flex-basis: 50%;
        }
      }
    }
    .select-custom__view {
      background-color: #f1f1f1;
    }
    .title-wrapper,
    .cost-wrapper {
      flex-basis: 100%;
    }
    .cost-wrapper {
      text-align: right;
    }
  }
  &__sub-footer {
    border-top: 1.2px solid black;
    display: flex;
    padding-top: 13px;
    .wrapper {
      flex-basis: 50%;
      &:last-child {
        text-align: right;
      }
    }
    p {
      margin: 0;
    }
    a {
      color: #00aaee;
      font-weight: 500;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      @include media-breakpoint-up(sm) {
        font-size: 20px;
      }
    }
    .sub-title {
      font-size: 12px;
      color: #999999;
      font-weight: 600;
      line-height: 15px;
    }
  }
}

table {
  .th {
    font-size: 20px;
    @include media-breakpoint-up(sm) {
      font-size: $body-font-size;
    }
  }
}

.table {
  margin-bottom: 0;
  @include media-breakpoint-up("sm") {
    display: table;
  }
  .tr {
    @include media-breakpoint-up("sm") {
      display: table-row;
    }
    + .tr {
      margin-top: 10px;
    }
    &:not(:first-child) {
      .td__head {
        @include media-breakpoint-up("sm") {
          display: none;
        }
      }
    }
  }
  .td {
    @include media-breakpoint-up("sm") {
      display: table-cell;
    }
    &__head {
      font-weight: 700;
    }
  }
}
