@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../sass/shared/label';

#{$object-prefix}input-field {
  @include typography.body-large;
  display: flex;
  max-width: 100%;
  line-height: 3rem;
  height: 3rem;
  background-color: $white;
  border: 1px solid $sodra-black-25;
  padding: 0 1rem;

  &:focus {
    background: $blue-25;
    outline: 1px outset $sodra-black;
  }

  &--border-success {
    border: 1px solid $green;
  }

  &--border-danger {
    border: 1px solid $red;
  }

  &--light-grey {
    background-color: $light-grey !important;
  }

  &--white {
    background-color: $white !important;
  }

  &--small {
    line-height: 2.5rem;
    height: 2.5rem;
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox number input*/
  &[type='number'] {
    -moz-appearance: textfield;
  }
}