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

.bom-custom-header {
  position: relative;
  width: 100%;
  font-weight: normal;

  button {
    width: 100%;
    text-align: left;
    background: $white;
    border: none;
    padding: 6px 10px;
    outline: none;
  }

  .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    right: 10px;
    pointer-events: none;

    &--down {
      border-top: 6px solid $black;
      bottom: 13px;
    }
  }

  &-selection {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 1;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    max-height: 25rem;

    &-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    &-list-item {
      padding: 6px 10px;
      display: block;
      border-bottom: 1px solid $midlightgrey;
      cursor: pointer;
      background-color: $white;
      color: $black;

      &:hover {
        background-color: $black;
        color: $white;
      }
    }
  }

  &-custom-field {
    cursor: default;
    padding: 10px;

    input {
      width: 80%;
      padding: 3px 5px;
    }

    button {
      width: 20%;
      cursor: pointer;
      text-transform: uppercase;
      text-align: center;
      font-weight: bold;
      color: $middarkgrey;
      padding: 0;

      &.enabled {
        color: $black;
      }
    }

    &:hover {
      background-color: $white;
      color: $black;
    }
  }
}