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

$paddingX: 1.125rem;
$extraWidth: 0.75rem;
$numberArrowsChome: 1.5rem;

/*** RESET ***/
input:required {
  box-shadow: none;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='date'] {
  &.atom_input {
    display: block;
    font-size: 1.125rem;
    font-weight: 400;
    padding: 0.75rem 1.125rem;
    outline: none;
    width: 99%;
    border: 2px solid $neutral300;
    background-color: $white;
    border-radius: 0;
    appearance: none;
    transition:
      left 0.5s,
      width 0.5s;
    left: 0;
    line-height: 100%;

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

    &--xsmall {
      max-width: 6rem;
    }

    &--small {
      max-width: 12rem;
    }

    &--medium {
      max-width: 20rem;
    }

    &--large {
      max-width: 26rem;
    }

    &--xlarge {
      max-width: 32rem;
    }

    &--disabled {
      background-color: $neutral50;
      color: $neutral700;
      font-style: italic;
    }

    &:hover:not(.atom_input--disabled) {
      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;
    }
  }

  //Sett maks lengde på input felt etter hva som er satt som max.
  @for $i from 1 through 40 {
    &.atom_input--#{$i} {
      max-width: calc((0.8rem * #{$i}) + (#{$paddingX} * 2) + #{$extraWidth});
    }
  }
}

//Maks lengde på input felt nummer trenger ekstra plass for piler på Chrome
input.rw-input,
input[type='number'],
input[type='tel'] {
  @for $i from 1 through 40 {
    &.atom_input--#{$i} {
      max-width: calc((0.75rem * #{$i}) + (#{$paddingX} * 2) + #{$numberArrowsChome} + #{$extraWidth});
    }
  }
}

@media (min-width: map-get($grid-breakpoints, lg)) {
  input[type='text'] {
    &.atom_input.inline {
      width: calc(100% - 7rem);
    }
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.atom_input__loader {
  top: 1.65rem;
  left: 1rem;
}