@use './mixins';
@use './../spacing/tokens.scss' as spacing;
@use './../borders/mixins.scss' as border;
@use './../colors/mixins.scss' as colorMixin;

.fudis-visually-hidden {
  @include mixins.visually-hidden;
}

.fudis-box-reset {
  @include mixins.box-reset;
}

.fudis-dimmer {
  @include mixins.dimmer;
}

// Invalid and disabled state styles for input elemenets

.fudis-form-input {
  @include border.border('1px', 'solid', 'gray-middle');
  @include colorMixin.bg-color('white');

  &[aria-invalid='true'] {
    @include border.border('1px', 'solid', 'red');
  }

  &[aria-disabled='true'] {
    @include border.border('1px', 'dashed', 'gray-middle');
    @include colorMixin.bg-color('gray-extra-light');

    cursor: default;
    pointer-events: none;
  }
}

.fudis-input-size {
  &__xs {
    max-width: spacing.$input-width-xs;
  }

  &__sm {
    max-width: spacing.$input-width-sm;
  }

  &__md {
    max-width: spacing.$input-width-md;
  }

  &__lg {
    max-width: spacing.$input-width-lg;
  }

  &__full-width {
    max-width: 100%;
  }
}