@import '../../core/src/style/variables';
// Styles for icon that display dropdown header checkbox

:host{
  &.disabled{
    pointer-events: none;
    opacity: 0.5;
  }
}
:host.alternate-modal {
  overflow: hidden;

  bom-part {
    max-width: 110px;
    position: relative;
    top: -5px;
  }

  wpt-radio-group {
    vertical-align: top;
    padding-right: 5px;
  }

  wpt-row {
    position: relative;
  }

  wpt-header-row {
    height: 40px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .list-wrapper {
    .fixed-columns-table {
      .wpt-column-part-number-no-cpn {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: stretch;
        justify-content: flex-start;
        width: 150px;
      }
    }

    .fixed-columns-table,
    .variable-columns-table {
      wpt-row {
        &:nth-child(odd) {
          background: $white;
        }
      }
    }
  }

  .variable-columns-table-wrapper {
    scroll-behavior: smooth;

    .variable-columns-table {
      wpt-cell,
      wpt-header-cell {
        width: 170px;
        flex: 0 0 auto;
      }

      .wpt-column-total {
        width: 145px;
      }

      .wpt-column-tariff {
        width: 80px;
      }

      .wpt-column-stock-right,
      .wpt-column-lifecycle {
        width: 135px;
      }

      .wpt-column-grade {
        width: 110px;
      }

      .wpt-column-match-type {
        width: 150px;
      }
    }

    .wpt-column-tariff {
      wpt-icon {
        color: $button-hover-orange;
        position: relative;
        padding: 4px 5px;
        z-index: 0;
      }
    }

    .grey-border {
      border-right-style: solid;
      border-right-width: 1px;
      border-right-color: #dedede;
    }
  }
}

.list-wrapper {
  position: relative;
  display: flex;

  .fixed-columns-table,
  .variable-columns-table {
    scroll-behavior: smooth;
    .wpt-header-row,
    .wpt-row {
      display: inline-flex;
      vertical-align: top;
      min-width: 100%;
    }
    position: relative;
    wpt-cell {
      height: 165px;
      padding: 10px;
    }

    .sticky-cell {
      position: sticky;
      background-color: #fff;
      z-index: 1;
    }
    .crosses-part {
      width: 160px !important ;
      left: 0;
    }
    .crosses-manufacturer {
      width: 140px !important ;
      left: 160px;
    }
    .sticky-cell-border{
      border-right: 1px solid #dedede;
    }
    .sticky-header {
      top: 0;
      position: sticky
    }
    wpt-header-cell {
      padding: 0 10px;
      min-height: 40px;
      display: grid;
      align-items: center;
      background-color: #dedede !important;
    }
    wpt-header-row {
      padding: 0;
      min-height: 40px;
      z-index: 99;
      background-color: $lightergrey;
      color: $black;
      .wpt-header-cell,
      .wpt-sort-header-button {
        color: black;
        font-size: 1.2rem;
        font-weight: 700;
      }
    }

    wpt-row {
      padding: 0;
      &:nth-child(odd) {
        background: $lightgrey;
      }
    }

    &.bom-stick-to-top {
      wpt-header-row {
        position: relative;
      }
    }
  }

  .fixed-columns-table {
    border-right: 1px solid $lightergrey;

    .wpt-column-select {
      width: 48px;
      padding-right: 0;

      .selectOptionsButton {
        padding-left: 3px;
      }
    }

    .wpt-column {
      &-select {
        flex: 0 0 auto;
        width: 55px;
        display: flex;
      }
      &-selectCross {
        flex: 0 0 auto;
        width: 100px;
      }
      &-status {
        flex: 0 0 auto;
        width: 73px;
      }
      &-user-uploaded-data {
        flex: 2 0 auto;
        width: 188px;
      }
      &-alternate-radio {
        flex: 1 0 auto;
        width: 30px;
      }
      &-part-number,
      &-part-number-no-cpn,
      &-manufacturer {
        flex: 2 0 auto;
        width: 200px;
      }
      &-manufacturer {
        width: 150px;
      }
      &-price {
        flex: 2 0 auto;
        width: 155px;
      }
      &-quantity {
        flex: 2 0 auto;
        width: 140px;
      }
      &-stock {
        flex: 1 0 auto;
        width: 130px;
      }
      &-delete {
        flex: 0 0 auto;
        width: 57px;
      }
    }
  }

  .variable-columns-table-wrapper {
    overflow: auto;

    .variable-columns-table {
      wpt-cell,
      wpt-header-cell {
        width: 196px;
        flex: 0 0 auto;
      }

      .wpt-column {
        &-select {
          flex: 0 0 auto;
          width: 55px;
          display: flex;
        }
      }
      
      .wpt-column-quantity {
        width: 160px;
        &.active{
         background: rgba(117,117,117,.3);

        }
      }

      .wpt-column-quantity .active:first-of-type {
        background: red;
        border-top: 3px solid $blue;
      }
      
      .quantity-header-wrapper {
        font-size: 1.2rem;
        width: 160px;
        &.active{
          box-sizing: border-box;
          border-bottom: 3px solid $blue;
        }
        .title{
          margin: 0;
          display: flex;
          span {
            font-size: 1.2rem;
            flex: 1;
          }
          wpt-icon {
            height: inherit;
            width: 24px;
            margin-right: 1rem;
            margin-bottom: 0;
            cursor: pointer;
            font-size: 1.4rem;
            text-align: center;
            transform: rotate(90deg);
          }
        }
        .options-wrapper{
          position: absolute;
          top: 4rem;
          z-index: 100;
          background: white;
          width: 14rem;
          box-shadow: 0 5px 5px 0 $middarkergrey;
          .option{
            min-height: 3.1rem;
            cursor: pointer;
            padding: .8rem 1rem;
            font-weight: normal;
            border-bottom: 1px solid $lightgrey;
            &:last-child{
              border-bottom: none;
              position: relative;
            }
            &:hover{
              background: #757575;
              color: $white;
              .add-wrapper{
                background: white;
              }
            }
            &.disabled{
              pointer-events: none;
              color: $middarkgrey;
            }
            &-add{
              position: absolute;
              margin: .7rem 0rem 0rem -1rem;
              padding: 0rem 1rem 1rem 1rem;
              width: 100%;
              float: left;
              /* margin: 0; */
              text-align: center;
              background: white;
              &-formula{
                margin-top: .7rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                //Remove Arrows
                /* Chrome, Safari, Edge, Opera */
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                  -webkit-appearance: none;
                  margin: 0;
                  text-align: center;
                  &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                    color: $lightergrey;
                    opacity: 1; /* Firefox */
                  }
                }

                /* Firefox */
                input[type=number] {
                  text-align: center;
                  -moz-appearance: textfield;
                  &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                    color: $lightergrey;
                    opacity: 1; /* Firefox */
                  }
                }
              }
             &-action{
               padding-top: .5rem;
               text-align: right;
               span{
                 margin-top: .5rem;
                 color: $blue;
                 &::after{
                   padding-left: .5rem;
                   font-family: 'bomIcomoon';
                   content: '\e69c';
                 }
                 &.disabled{
                   cursor: none;
                   opacity: 0.3 ;
                 }
               }
             }
              &.open{
                color: black;
                box-shadow: 0 5px 5px 0 $middarkergrey;
              }
            }
            .multiplier-qty{
              width: 3rem;
              margin: 0 .2rem;
            }
            wpt-loader{
              display: flex;
              position: relative;
              top: .6rem;
            }
          }
        }
      }
    }
  }
}

.ListItem-toggleCrosses {
  color: $lochmara;
  text-align: left;
  text-decoration: underline;
  margin-top: 5px;
  font-size: 1.2rem;
  font-weight: bold;
  span {
    cursor: pointer;
  }
}

.List {
  &.scrolledLeft .List-row:after,
  &.scrolledLeft thead:after,
  &.scrolledRight .List-row:before,
  &.scrolledRight thead:before {
    opacity: 1;
  }
}

.hide {
  display: none;
}

.btn-tariff {
  color: $lochmara;
  text-decoration: underline;
  font-size: 1.2rem;
}

.btn-link {
  font-size: 1.4rem;
  text-decoration: none;
  color: black;
}
.scroll {
  position: absolute;
  right: 0;
  z-index: 200;
  @media screen and (min-width: 701px) {
    top: 30px;
  }
  @media screen and (max-width: 700px) {
    top: 15px;
  }
  margin-right: 15px;
  span {
    cursor: pointer;
    padding-left: 10px;
    position: relative;
    z-index: 400;
    &.disabled {
      visibility: hidden;
      cursor: not-allowed;
    }
    &.visible {
      visibility: visible;
    }
    wpt-icon {
      color: $middarkgrey;
      width: auto;
      padding: 0;
      font-size: small;
    }
  }
}

.scroll-background {
  width: 55px;
  position: absolute;
  right: 0;
  z-index: 100;
  @media screen and (min-width: 701px) {
    top: 30px;
  }
  @media screen and (max-width: 700px) {
    top: 15px;
  }
  background: $lightergrey;
  height: 15px;
  &.hide {
    visibility: hidden;
  }
}

.display-none {
  display: none !important;
}