@import '../../../../core/src/style/variables';

.BuyingOptionsModal {
  font-size: 1.4rem;

  &-header {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    .BomModal-close {
      align-self: flex-end;
      border: none;
      background: none;
      &:focus {
        outline: none;
      }
    }
    h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.6rem;
      word-break: break-all;
    }
    &-info {
      display: flex;
      font-size: 1.4rem;
      letter-spacing: 0.05rem;
      padding-top: 10px;
      @media screen and (min-width: 851px) {
        flex-direction: row;
      }
      @media screen and (max-width: 850px) {
        flex-direction: column;
      }
      span {
        @media screen and (min-width: 851px) {
          width: 25%;
        }
        @media screen and (max-width: 850px) {
          min-width: 180px;
        }
        
        &:first-child {
          width: 30%;
        }
        &:last-child {
          width: 35%;
          @media screen and (min-width: 851px) {
            text-align: right;
          }
        }
      }
    }
  }

  &-buyingOptions-container {
    margin: 0;
    padding: 0;
    overflow: hidden;
    .table-wrapper {
      max-width: 82rem;
      max-height: 40rem;
      border: 1px solid $middarkgrey;
      overflow: auto;
      position: relative;
      .wpt-table {
        width: 145rem;
        scroll-behavior: smooth;
        .wpt-header-row,
        .wpt-row {
          display: inline-flex;
          vertical-align: top;
          min-width: 100%;
          padding: 0;
        }
        .wpt-row {
          &.reel-row {
            wpt-cell {
              height: 18rem;
            }
          }
          &.hidden-row {
            display: none;
          }
        }
        position: relative;
        wpt-cell {
          height: 13rem;
          padding: 8px 3.5px;
        }
        wpt-header-cell {
          padding: 0 3.5px;
        }
        wpt-header-row {
          padding: 0;
          min-height: 4.5rem;
          z-index: 99;
          background-color: $lightergrey;
          color: $darkgrey;
          .wpt-header-cell,
          .wpt-sort-header-button {
            color: $darkgrey;
            font-size: 1.2rem;
            font-weight: bold;
          }
        }
        .wpt-column {
          &-quantity {
            flex: 1 5rem;
            input {
              width: 8.5rem;
              height: 4rem;
              padding: 0.5rem;
              &.no-reels {
                margin-bottom: 1rem;
              }
            }
            label {
              display: block;
              font-weight: bold;
              margin-bottom: 0.5rem;
            }
            .reel-total-qty {
              display: block;
              margin: 1rem 0;
            }
          }
          &-package {
            flex: 1 5rem;
            text-transform: capitalize;
            .combined-warning {
              text-transform: none;
              display: block;
              line-height: 1.25rem;
              margin-top: 1rem;
              letter-spacing: 0.06rem;
              font-size: 1.2rem;
              color: $orange;
              wpt-icon {
                width: 1.5rem;
                height: 1rem;
              }
            }
          }
          &-price {
            flex: 2;
            wpt-pricing {
              padding: 0;
              margin: 0;
            }
            .currency {
              font-size: 1.2rem;
              display: block;
              margin-top: 0.5rem;
            }
          }
          &-minimum-increment {
            flex: 2;
            span {
              display: block;
              font-size: 1.2rem;
              margin-bottom: 0.5rem;
              &.error {
                color: $red;
              }
            }
          }
          &-tariff {
            flex: 1;
            .tariff-icon {
              color: $orange;
            }
            wpt-icon {
              padding: 4px 5px;
            }
          }
          &-stock {
            flex: 1 6rem;
            .invalid{
              font-weight: bold !important;
            }
            .stock-amount{
              font-weight: normal;
            }
            span {
              font-weight: bold;
              wpt-icon {
                margin-right: 5px;
                width: 14px;
              }
            }
          }
          &-pipeline {
            flex: 1 40px;
          }
        }
      }
    }
    &-all-hidden-message {
      text-align: center;
      padding: 15rem;
      h4 {
        margin-bottom: 0.5rem;
      }
      span {
        color: $lochmara;
        text-decoration: underline;
        cursor: pointer;
        font-size: 1.4rem;
        letter-spacing: 0.07rem;
      }
    }
  }

  &-stockInfo {
    min-width: 180px;
    .error {
      color: $red;
    }
  }

  &-actions {
    display: flex;
    &-hidden-link {
      span {
        color: $lochmara;
        text-decoration: underline;
        cursor: pointer;
        font-size: 1.4rem;
        letter-spacing: 0.07rem;
      }
    }
    &-buttons {
      position: relative;
      display: flex;
      justify-content: end;
      align-items: center;
      width: 100%;
      .international-fee-message {
        color: #a87a5c;
        font-weight: bold;
        position: absolute;
        left: 0;
      }
    }
    &:last-child{
      margin-left: .8rem;
    }
  }

  &-warning {
    color: $grenadier;
    text-align: right;
    display: none;
    letter-spacing: 0.32px;
    padding: 1em 0.5em;
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

.show {
  display: block;
}