@import "../mixins/mixins";
@import "../mixins/typo";
@import "../mixins/utils";
@import "../config/variables";
@import "./select-dropdown";
@import "./scrollbar";

@include b(select) {
  display: inline-block;
  position: relative;
  width: 100%;

  @include e(reference) {
    height: 52px;
    border-radius: $--border-radius;
    box-shadow: inset 0 0 0 1px $--color-silver;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
  }

  @include e(group) {
    position: relative;
    width: 100%;
    //padding: 14px 56px 14px 16px;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
  }

  @include e(label) {
    @include bodyL;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    padding: 0 56px 0 $--size-base * 4;
    top: $--size-base * 3 + 2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: rgba($--color-text, 0.6);
    display: inline-block;
    width: 100%;
    transition: all .15s ease-in-out .05s;
    cursor: pointer;
    @include utils-user-select(none);
  }

  @include e(input) {
    position: absolute;
    width: calc(100% - 72px);
    left: 16px;
    bottom: 6px;
    height: 24px;
    outline: none;
    border: none;
  }

  @include e(icon) {
    position: absolute;
    top: $--size-base * 4 - 2;
    right: $--size-base * 4;
    color: $--color-primary;
  }

  @include e(value) {
    @include bodyL;
    color: $--color-text;
    padding: 22px 56px 6px 16px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    @include utils-user-select(none);
  }

  &:hover {
    @include e(reference) {
      box-shadow: inset 0 0 0 1px $--color-grey;
    }
    @include e(label) {
      color: $--color-text;
    }
  }

  @include when(focused) {
    @include e(reference) {
      box-shadow: inset 0 0 0 1px $--color-primary;
    }
    @include e(label) {
      @include bodyS;
      top: $--size-base;
      color: $--color-warmtext;
    }
  }
  @include when(dirty) {
    @include e(label) {
      @include bodyS;
      top: $--size-base;
      color: $--color-warmtext;
    }
  }

  @include e(option) {
    width: 100%;
    height: 35px;
    @include bodyS;
    padding: $--size-base * 2 $--size-base * 4;
    color: $--color-text;
    background: $--color-white;
    box-sizing: border-box;
    cursor: pointer;
    @include when(selected) {
      background: $--color-white;
      color: $--color-primary;
    }
    &:hover {
      color: $--color-white;
      background: $--color-primary;
    }
  }

  @include e(empty) {
    @include bodyS;
    color: $--color-silver;
    padding: $--size-base * 2 $--size-base * 4;
  }

  @include when(disabled) {
    @include e(reference) {
      box-shadow: inset 0 0 0 1px $--color-disabled;
      cursor: not-allowed;
    }
    @include e(label) {
      color: $--color-silver;
      cursor: not-allowed;
    }
    @include e(value) {
      color: $--color-silver;
      cursor: not-allowed;
    }
    @include e(icon) {
      color: $--color-silver;
      cursor: not-allowed;
    }
  }
}