@import '../../../assets/scss/components/select/_variables';

.st-select-content {
  @extend .st-input;

  &:hover {
    @extend .st-input--hovered;
  }

  .st-input__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $st-select-inner-input-z-index;
    opacity: 0;
  }

  .st-input__clear {
    z-index: $st-select-above-input-elements-z-index;
  }

  &__placeholder {
    width: 100%;
    overflow: hidden;
    color: $st-select-placeholder-color;
    white-space: nowrap;
    cursor: default;
  }

  &__value {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__icon {
    @extend .st-input__icon;
  }

  &__suffix-icon {
    @extend .st-input__suffix-icon;
  }

  &__arrow-icon {
    width: $st-select-arrow-icon-width;
    height: $st-select-arrow-icon-height;
    font-size: $st-select-arrow-icon-font-size;
  }
}