/* stylelint-disable property-disallowed-list */
/* stylelint-disable unit-disallowed-list */
@use './../spacing/tokens.scss' as spacing;
@use './../typography/mixins.scss' as typography;
@use './../borders/mixins.scss' as borders;
@use './../focus/mixins.scss' as focus;

@mixin visually-hidden() {
  position: absolute;
  left: 0;
  opacity: 0;
  margin: -1px;
  outline: 0;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
}

@mixin box-reset() {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@mixin text-input() {
  @include typography.text-field-input;
  @include borders.border-radius('2px');

  box-sizing: border-box;
  padding: spacing.$spacing-xxs spacing.$spacing-sm;
  width: 100%;
  height: spacing.$spacing-xl;

  &:focus {
    @include focus.focus-form-field;
  }
}

@mixin text-area() {
  @include typography.text-field-input;

  box-sizing: border-box;
  display: block;
  padding: spacing.$spacing-xxs;
  width: 100%;
  height: calc(5rem / var(--fudis-rem-multiplier));
  resize: vertical; // Enable resizing the textarea only vertically. Can be also 'none' if we want to disable resizing all together

  &:focus {
    @include focus.focus-form-field;
  }
}