@use "system/breakpoints";
@use "system/colors";
@use "system/typography";
@use "system/spacing";
@use "system/states";

@mixin error-message() {
  background: colors.$red-light;
  @extend %ods-margin-top-1;
  @extend %ods-padding-4;
  @extend %ods-text--size-lima;
  @extend %ods-text--weight-light;
}

@mixin form-states() {
  &--hover &__input,
  &__input:hover,
  &--hover &__textarea,
  &__textarea:hover,
  &--hover &__select select,
  &__select select:hover,
  &--error &__input:hover,
  &--error &__textarea:hover,
  &--error &__select select:hover {
    border-color: states.$hover;
  }

  &__input:focus,
  &__textarea:focus,
  &__select select:focus,
  &--error &__input:focus,
  &--error &__textarea:focus,
  &--error &__select select:focus,
  &--focus &__input,
  &--focus &__textarea,
  &--focus &__select select {
    border: 0.125rem solid states.$hover;
  }

  &--error &__input,
  &--error &__textarea,
  &--error &__select select {
    border: 0.125rem solid colors.$red-light;
  }

  &:disabled,
  &--disabled &__input,
  &--disabled &__textarea,
  &--disabled &__label,
  &--disabled &__select select {
    border-color: states.$disabled-text;
    color: states.$disabled-text;

    &::after {
      color: states.$disabled-text !important;
    }
  }
}

@mixin form-component() {
  @extend %ods-padding-horizontal-4, %ods-padding-vertical-2;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  @extend %ods-text--weight-light;

  appearance: none;
  background-color: colors.$white;
  border: 0.125rem solid colors.$blue-dark;
  border-radius: 0;
  color: colors.$blue-dark;
  font-family: inherit;
  line-height: 1.5rem;
  outline-style: none;
  position: relative;
  width: 100%;

  @include breakpoints.large {
    line-height: 1.75rem;
  }

  & + span.ods-icon {
    cursor: default !important;
    bottom: 0.625rem;
    font-size: inherit;
    position: absolute;
    right: 1rem;
  }
}

@mixin form-label() {
  cursor: pointer;
  display: block;
  position: relative;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  @extend %ods-text--weight-medium;

  &--disabled {
    color: states.$disabled-text;
  }
}