lego-select {
  .input-wrapper {
    .input {
      input {
        &:read-only {
          border-bottom: $input-border-width solid $border-gray;

          &:focus {
            border-color: $secondary;
          }
        }

        &:disabled + .dropdown-arrow {
          color: $disable-text;
        }

        &.error {
          border-bottom: 1px solid $error;
        }
      }

      .dropdown-arrow {
        position: absolute;
        color: inherit;
        right: 0;
        bottom: 0;
      }
    }
  }

  &:not(.disabled) {
    .dropdown-arrow {
      cursor: pointer;
    }
  }
}

.select-options-container {
  border-radius: 3px;
  background-color: $white;
  box-shadow: $box-shadow-dropdown;
  display: block;
  overflow: auto;
  width: 100%;

  lego-select-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $body-text-color;
    background-color: $white;
    border-radius: inherit;
    padding: 0 0.875rem;

    .content-holder {
      line-height: 2.5rem;
      height: 2.5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      user-select: none;
    }

    &.selected {
      color: $secondary;
      background-color: $bg-gray;
      font-weight: $font-weight-medium;

      &:hover, &.active {
        background-color: $dim-gray;

        @media screen and (-ms-high-contrast: active) {
          background-color: $dim-gray;
        }
      }
    }

    &.clear-selection {
      color: $mid-gray;
    }

    &.multiple {
      &.select-all {
        border-bottom: solid 1px $border-gray;
      }
    }

    &:hover, &.active {
      outline: none;
      background-color: $dim-gray;

      @media screen and (-ms-high-contrast: active) {
        background-color: $dim-gray;
      }
    }

    &.disabled {
      color: $disable-text;
      cursor: auto;

      &:hover, &:focus {
        outline: none;
        background-color: $white;

        @media screen and (-ms-high-contrast: active) {
          background-color: $white;
        }
      }
    }
  }

  .selected-options {
    border-bottom: solid 1px $border-gray;
  }

  .empty-message {
    text-align: center;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    background-color: #ffffff;
  }
}