@import '@helsenorge/designsystem-react/scss/palette';

.atom_select {
  position: relative;
  display: inline-block;
  vertical-align: middle;

  &::after {
    content: '';
    height: 1rem;
    width: 1rem;
    background: url('./../../img/icons/nav_arrow_down_black.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: calc(50% - 7px);
    right: 1rem;
    pointer-events: none;
  }

  &__select {
    background-color: $white;
    padding: 0.75rem 1.125rem;
    font-weight: 400;
    font-size: 1.125rem;
    border: 2px solid $neutral300;
    border-radius: 0;
    padding-right: 3rem;
    appearance: none;
    width: 100%;
    max-width: 100%;

    &:hover {
      background-color: $neutral50;
      border-color: $neutral400;
      box-shadow: 0 0 0 2px $neutral400;
    }

    &:focus,
    &:focus-within {
      border-color: $black;
      box-shadow: 0 0 0 2px $black;
      outline: none;
    }

    &--state_validationerror {
      border: 2px solid $cherry600;
    }

    &--haslabelleft {
      width: auto;
    }

    //Fjerner pil fra IE
    &::-ms-expand {
      display: none;
    }
  }
}

.atom_label--showleft {
  display: inline-block;
}