/// ----------------------------------------------------------------------

/// Select

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'corners';
@use 'borders';
@use 'shadows';
@use 'gradients';
@use 'colours';
@use 'typography';
@use 'animations';
@use 'transitions';
@use 'states';
@use 'z-index';

/// -------------------
/// Select config
/// -------------------

$padding-x: spacing.$sm !default;
$bg-colour: colours.$ui-one !default;

/// -------------------
/// Select wrapper
/// -------------------

.select {
  display: inline-block;

  &--disabled,
  &:disabled {
    @include states.disabled;
  }

  &:focus-within {
    outline: none;
  }
}

/// -------------------
/// Select input
/// -------------------

.select__input {
  @include lib.resets-style;
  @include lib.components-flow($border-width: 1px);
  background: #fff;
  width: 100%;
  padding-left: $padding-x;
  padding-right: $padding-x * 2.5;
  font-family: typography.$font-family;
  font-weight: typography.$font-regular;
  border-radius: corners.$base;
  border: borders.$ui-three;
  transition: all transitions.$ease;
  appearance: none;

  &:read-only {
    cursor: pointer;
  }

  &::placeholder {
    color: colours.$ui-five;
    opacity: 1;
  }

  &:focus {
    @include states.focus;
  }
}

/// -------------------
/// False options list
/// -------------------

.select__options {
  @include lib.resets-list;
  display: block;
  position: absolute;
  background-color: white;
  border-radius: corners.$base;
  max-height: 350px;
  overflow-y: auto;
  z-index: z-index.$select;

  &--visible {
    border: borders.$ui-two;
  }
}

/// -------------------
/// Select option
/// -------------------

.select__option {
  @include lib.resets-style;
  position: relative;

  &--sticky {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: borders.$ui-two;
    z-index: z-index.$default;
    padding-bottom: spacing.$xs;
  }
}

/// -------------------
/// Select button (option)
/// -------------------

.select__option-btn {
  @include lib.resets-style;
  width: 100%;
  font-size: typography.$base-font-size;
  font-family: typography.$font-family;
  text-align: left;
  padding: spacing.$sm spacing.$md;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;

  &:hover,
  &:focus {
    background-color: rgba(colours.$brand-one, 0.1);
    font-weight: typography.$font-regular;
    outline: none;
  }

  &:disabled {
    @include states.disabled;
  }

  &--clear {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-bottom: borders.$ui-two;
    color: colours.$ui-four;
    font-size: map-get(typography.$small, 'font-size');

    &:only-child {
      margin-bottom: -(spacing.$xs);
    }

    &:hover {
      opacity: 1;
    }
  }
}

/// -------------------
/// Select button
/// -------------------

.select__tag.tag {
  margin-right: spacing.$xs;
  margin-top: spacing.$xs;
  margin-left: spacing.$xs;
}

/// -------------------
/// Select checkbox
/// -------------------

.select__checkbox {
  @include lib.utilities-center-y;
  left: $padding-x;
  pointer-events: none;
}

/// -------------------
/// Select chevron icon
/// -------------------

.select__icn {
  @include lib.utilities-center-y;
  right: $padding-x;
}
