// NativeSelect component styles

.native-select {
  position: relative;
  display: inline-flex;
  min-width: 120px;

  &--full-width {
    display: flex;
    width: 100%;
  }

  &--disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  &--error {
    .native-select__input {
      border-color: var(--color-error, #d32f2f);

      &:focus {
        border-color: var(--color-error, #d32f2f);
        box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
      }
    }
  }

  &__input {
    appearance: none;
    width: 100%;
    padding: 10px 32px 10px 12px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
    background-color: transparent;
    border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
    border-radius: var(--border-radius, 4px);
    cursor: pointer;
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);

    &:hover:not(:disabled) {
      border-color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
    }

    &:focus {
      outline: none;
      border-color: var(--color-primary, #1976d2);
      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    }

    &:disabled {
      color: var(--color-text-disabled, rgba(0, 0, 0, 0.38));
      cursor: not-allowed;
    }

    // Remove default dropdown arrow in IE
    &::-ms-expand {
      display: none;
    }
  }

  &__icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.54));
  }

  // Variant: outlined (default)
  &--outlined {
    .native-select__input {
      border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
    }
  }

  // Variant: filled
  &--filled {
    .native-select__input {
      background-color: var(--color-fill-light, rgba(0, 0, 0, 0.06));
      border: none;
      border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.42));
      border-radius: var(--border-radius, 4px) var(--border-radius, 4px) 0 0;
      padding: 25px 32px 8px 12px;

      &:focus {
        background-color: var(--color-fill-dark, rgba(0, 0, 0, 0.09));
        box-shadow: none;
        border-bottom-width: 2px;
        border-bottom-color: var(--color-primary, #1976d2);
      }
    }
  }

  // Variant: standard
  &--standard {
    .native-select__input {
      border: none;
      border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.42));
      border-radius: 0;
      padding: 4px 24px 5px 0;

      &:focus {
        box-shadow: none;
        border-bottom-width: 2px;
        border-bottom-color: var(--color-primary, #1976d2);
      }
    }
  }
}