@import "../settings/variables";
@import "../tools/arrows";
@import "../tools/buttons";
@import "../tools/ellipsis";
@import "../tools/forms";
@import "./typography";

.select {
  @include button(
    $select-fill,
    $select-border-color,
    $select-text-color,
    $select-fill-hover,
    $select-border-color-hover,
    $select-text-color-hover,
    $button-dropdown-disabled-fill,
    $button-dropdown-disabled-border,
    $select-text-color-disabled
  );

  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: $select-font-size;
  height: $select-height;
  min-height: $select-height;
  outline: none;
  padding: 0 $select-padding-horizontal;
  position: relative;
  white-space: nowrap;
  width: $button-dropdown-width;

  &--block {
    width: 100%;
  }

  &--error {
    border: $select-border-settings-error;
    border-color: $select-error-border-color;
    background-color: $select-fill-error;
    border-color: var(
      --core-input-error-border-color,
      $select-error-border-color
    );
    background-color: var(
      --core-input-error-background-color,
      $select-fill-error
    );

    &:hover {
      border: $select-border-settings-error;
      border-color: $select-error-border-color;
      background-color: $select-fill-error;
      border-color: var(
        --core-input-error-border-color,
        $select-error-border-color
      );
      background-color: var(
        --core-input-error-background-color,
        $select-fill-error
      );
    }

    &:focus {
      background-color: $select-fill-error-focus;
      color: $select-text-color-focus;
    }
  }

  &--disabled,
  &:disabled {
    color: $select-text-color-disabled;
    cursor: default;
    pointer-events: none;

    .select__label {
      color: $select-text-color-disabled;
    }

    .select__arrow {
      @include arrow-down(
        $select-dropdown-arrow-size,
        $select-dropdown-arrow-color-disabled
      );
    }

    .select__spinner {
      position: static;
      margin-left: spacing(md);
    }
  }

  &--loading {
    background-color: $button-dropdown-fill;
    border-color: $button-dropdown-border;
    color: $button-dropdown-color;
  }

  &__label {
    @include ellipsis();
    flex-grow: 1;
    letter-spacing: $select-letter-spacing;
    line-height: 20px;
    margin-right: $select-label-margin-right;
    outline: none;
    pointer-events: none;
    user-select: none;

    &--placeholder {
      @extend .sm-regular--secondary;
    }
    &--hoverable {
      pointer-events: initial;
    }
  }

  &--error {
    background-color: $select-error-background-color;
    border-color: $select-error-border-color;
    border-color: var(
      --core-input-error-border-color,
      $select-error-border-color
    );
    background-color: var(
      --core-input-error-background-color,
      $select-fill-error
    );
  }

  &__spinner {
    flex: 0 0 auto;
    display: flex;
    line-height: 0;
    justify-content: center;
    align-items: center;
  }

  &--focus,
  &:focus {
    @include focus();
  }

  &__arrow-container {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    height: $select-arrow-button-height;
    width: $select-arrow-button-width;
    margin-left: $select-dropdown-arrow-margin-left;
  }

  &__arrow {
    @include arrow-down(
      $select-dropdown-arrow-size,
      $select-dropdown-arrow-color
    );
  }

  &--open {
    .select__arrow {
      @include arrow-up(
        $select-dropdown-arrow-size,
        $select-dropdown-arrow-color
      );
    }
  }

  &__overlay {
    max-height: 40vh;
    max-width: $button-dropdown-width;
  }

  &__clear-icon {
    color: $icon-layout-icon-color;
    opacity: 0;

    &--visible {
      opacity: 1;
    }
  }
}

.select--table {
  background-color: transparent;
  font-size: $table-font-size;
  height: auto;

  &:hover {
    background-color: transparent;
  }

  &.select {
    border-color: transparent;

    &:active:hover {
      border-color: $select-border-color;
    }

    &--error {
      border-color: $select-error-border-color;
    }

    &--focus,
    &:focus {
      cursor: pointer;
      @include focus();
      background-color: $table-background-color;
    }

    &--loading,
    &--open {
      border-color: $select-border-color;
    }
  }

  & > .select__label {
    white-space: normal;
  }

  &:focus > .select__label,
  &.select--loading > .select__label,
  &.select--open > .select__label {
    white-space: nowrap;
  }

  & > .select__arrow-container .select__arrow,
  & > .select__clear-icon,
  & > .select__label--placeholder {
    opacity: 0;
    pointer-events: none;
  }

  &.select--open > .select__arrow-container .select__arrow,
  &.select--open > .select__clear-icon--visible,
  &.select--open > .select__label--placeholder {
    opacity: 1;
    pointer-events: all;
  }

  &.select:focus > .select__arrow-container .select__arrow,
  &.select:focus > .select__clear-icon--visible,
  &.select:focus > .select__label--placeholder {
    opacity: 1;
    pointer-events: all;
  }

  &.select--loading,
  &.select--open {
    background-color: $table-background-color;
  }
}