@use "system/colors";
@use "system/breakpoints";
@use "system/icon-map";
@use "system/spacing";
@use "components/form/input/mixins";
@use "sass:map";

.ods-select {
  @include mixins.form-states;

  position: relative;

  &__required {
    @extend %ods-margin-top-1;

    padding: 0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    &::before {
      content: "* ";
    }

    &--optional::before {
      content: none;
    }
  }

  &__label {
    @include mixins.form-label;
  }

  &--focus &__select,
  &:focus-visible {
    outline: 0.25rem solid colors.$purple-light;
  }

  &__select {
    position: relative;
    @extend %ods-margin-top-2;

    & select {
      @include mixins.form-component;

      cursor: pointer;
      padding-right: 50px;

      &:focus-visible {
        outline: 0.25rem solid colors.$purple-light;
      }
    }

    &::after {
      color: inherit;
      content: map.get(icon-map.$icons, "chevron-thin-down");
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif;
      font-size: 2rem;
      pointer-events: none;
      position: absolute;
      right: 0.875rem;
      top: 1.4rem;
      transform: translateY(-50%);

      @include breakpoints.large {
        top: 1.5rem;
      }
    }
  }

  &--error {
    .ods-select__label {
      @extend %ods-margin-bottom-1;
    }
  }

  &__error-message {
    @include mixins.error-message;
  }
}