Ocelot-Social/styleguide/src/system/components/data-input/Select/style.scss

@import '../shared/input.scss';

@include input(ds-select);

.ds-select {
  user-select: none;
  .ds-input-has-focus & {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.ds-select-search, .ds-select-value {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: $input-border-size solid transparent;
  padding: $input-padding-vertical $space-x-small;
  line-height: $line-height-base;

  .ds-input-size-small & {
    padding: $input-padding-vertical-small $space-x-small;
  }

  .ds-input-size-large & {
    padding: $input-padding-vertical-large $space-x-small;
  }

  .ds-select-has-icon & {
    padding-left: $input-height;

    .ds-input-size-small & {
      padding-left: $input-height-small;
    }

    .ds-input-size-large & {
      padding-left: $input-height-large;
    }
  }

  .ds-select-has-icon-right & {
    padding-right: $input-height;

    .ds-input-size-small & {
      padding-right: $input-height-small;
    }

    .ds-input-size-large & {
      padding-right: $input-height-large;
    }
  }
}

.ds-select-search {
  appearance: none;
  font-size: inherit;
  font-family: $font-family-text;
  width: 100%;
  background: transparent;
  color: $text-color-base;
  outline: none;
  user-select: text;

  opacity: 0;

  &::placeholder {
    color: $text-color-disabled;
  }

  .ds-input-has-focus & {
    opacity: 1;
  }

  .ds-select-multiple & {
    position: relative;
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 0;
    opacity: 1;
  }
}

.ds-select-placeholder, .ds-select-value {
  pointer-events: none;

  .ds-input-has-focus & {
    opacity: 0;
  }
}

.ds-select-placeholder {
  color: $text-color-disabled;
}

.ds-selected-options {
  display: flex;
}

.ds-selected-option {
  display: inline-flex;
  margin-right: $space-xx-small;
}

.ds-select-dropdown {
  position: absolute;
  z-index: $z-index-dropdown;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: $background-color-base;
  border: $input-border-size solid $border-color-active;
  border-top: 0;
  border-bottom-left-radius: $border-radius-base;
  border-bottom-right-radius: $border-radius-base;
  visibility: hidden;
  opacity: 0;
  transition: all $duration-short $ease-out;
  max-height: 240px;
  overflow: auto;

  .ds-input-has-focus & {
    visibility: visible;
    opacity: 1;
  }
}

.ds-select-options {
  @include reset-list;
}

.ds-select-option {
  padding: $input-padding-vertical $space-x-small;
  cursor: pointer;
  transition: all $duration-short $ease-out;

  &.ds-select-option-hover {
    background-color: $background-color-primary;
    color: $text-color-primary-inverse;
  }
}

.ds-select-option-is-selected {
  background-color: $background-color-soft;
  color: $text-color-primary;
}