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

.BomModalComponent {
  // Need to override default BomModalComponent styles for smaller screen resolutions to enable scrollable content
  @media screen and (min-width: 756px) {
    overflow: hidden;
  } 
  @media screen and (max-width: 755px) {
    overflow: auto;
    position: unset;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -o-transform: none;
    margin: -24px; // to trump wpt-dialog-container > padding: 24px
  }

  .BomModal-create-cpn {
    &.BomModal-container {
      overflow: unset;
    }

    &--msgErrorsExist {
      font-size: 1rem;
      color: $red;
      margin-top: 5px;
      max-width: 340px;
    }

    .informative-text {
      max-width: 300px;

      p {
        margin: 0;
        font-size: 0.85em;

        &:first-child {
          margin-top: 1em;
        }
      }
    }

    h4 {
      margin: 15px 0 5px;
    }

    .new-cpn-input {
      input {
        border: 1px solid $grey;
        max-width: 340px;
        width: 100%;
        padding: 9px 9px;
        cursor: initial !important;
      }
    }

    .ec-dropdown {
      wpt-select {
        @media screen and (min-width: 701px) {
          max-width: 340px;
        } 
        @media screen and (max-width: 700px) {
          max-width: 220px;
        }
      }
    }

    .create-form {
      display: flex;
    }

    .create-information {
      display: flex;
      flex-grow: 2;
      flex-direction: column;
    }

    .create-button {
      display: flex;
      align-items: flex-end;
      position: relative;

      button {
        vertical-align: top;
        float: right;

        &[disabled] {
          color: $middarkgrey;
        }
      }
    }

    .approved-cpn-radio-btn-wrapper,
    .none-cpn-radio-btn-wrapper {
      max-height: 120px;
      overflow: auto;

      .end-customer-select {
        margin-left: 40px;

        h5 {
          margin: 0 0 10px;
        }

        .wpt-select {
          max-width: 200px;

          &:focus {
            border: 1px solid $lochmara;
          }
        }
      }

      .wpt-radio-button {
        margin: 10px 0 10px 20px;
        display: block;
      }
    }

    .approved-cpn-list {
      padding-bottom: 20px;
      border-bottom: 1px solid $grey;
    }

    .none-cpn {
      border-bottom: 1px solid $verydarkgrey;
    }

    & .placeholder {
      color: $midlightgrey;
    }
  }

  .BomModalComponent-buttons {
    button {
      width: 120px;
      height: 37px;
      float: right;

      &:first-child {
        margin: 0;
      }

      &:nth-child(2) {
        margin-right: 15px;
      }
    }
  }
}

.wpt-option {
  font-size: smaller;
  color: black;

  &.wpt-selected,
  &.wpt-selected:hover:not(.wpt-option-disabled),
  &.wpt-selected:focus:not(.wpt-option-disabled) {
    background: #7b7b7b;
    color: white;
  }

  &:hover:not(.wpt-option-disabled),
  &:focus:not(.wpt-option-disabled) {
    background: white;
    color: black;
  }
}