@use '~@moda/om';

.Select {
  $self: &;

  //ios devices zoom in if inputs are smaller than 16px
  @include om.breakpoint(sm, $prop: max-width) {
    @include om.text(h6);
  }

  min-height: 2.5625rem;
  position: relative;
  display: flex;
  cursor: pointer;

  &--disabled {
    cursor: default;

    #{$self}__value {
      color: om.color(fog);
      cursor: default;

      &:hover,
      &:focus {
        border-color: om.color(elephant);
        background-color: om.color('snow');
      }
    }
  }

  &--error {
    border: 1px solid om.color(code-red);
  }

  &__value {
    @include om.text(body1);

    //ios devices zoom in if inputs are smaller than 16px
    @include om.breakpoint(sm, $prop: max-width) {
      @include om.text(h6);
    }

    display: block;
    width: 100%;
    text-align: left;
    padding: om.spacing(2, 7, 2, 3);
    color: om.color(ink);
    border: 1px solid om.color(elephant);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.8;
    cursor: pointer;

    &:hover {
      border-color: om.color(cement);
      background-color: om.color(noise);
    }

    &:focus {
      border-color: om.color(cement);
      background-color: om.color(elephant);
    }
  }

  &__value--small {
    @include om.breakpoint(sm, $prop: max-width) {
      font-size: om.space(3);
    }
  }

  @for $i from 1 through 12 {
    &__value--padding-#{$i} {
      padding-right: om.space($i);
    }
  }

  &__icon {
    pointer-events: none;
    position: absolute;
    right: om.space(4);
    top: 50%;
    transform: translateY(-50%);

    &--shifted {
      right: om.space(6);
    }
  }

  &__options {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;

    &--up {
      flex-direction: column-reverse;
      bottom: 100%;
      margin-bottom: om.space(1);
    }

    &--down {
      flex-direction: column;
      margin-top: om.space(1);
      top: 100%;
    }
  }

  // we hide the field this way because with display:none or visibility:hidden Chrome does not allow click event to be fired from hidden HTML elements
  &__hidden-field {
    -moz-opacity: 0;
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
  }

  &__selected-color {
    border-color: om.color(ink);
    border-style: solid;
    border-radius: 50%;
    border-width: 1px;
    display: inline-block;
    margin-left: om.space(1);
    margin-right: om.space(1);
    height: om.space(4);
    transform: translateY(25%);
    width: om.space(4);
  }

  &__live-region {
    @include om.visually-hidden;
  }
}