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

.ods-input {
  @include mixins.form-states;

  &__input {
    @include mixins.form-component;
    @extend %ods-margin-top-2;

    &::placeholder {
      color: inherit;
    }

    &[type="number"]::-webkit-inner-spin-button,
    &[type="number"]::-webkit-outer-spin-button {
      appearance: none;
      margin: 0;
    }

    &[type="number"] {
      appearance: textfield;
    }

    &:focus-visible {
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &--focus input,
  &:focus-visible {
    outline: 0.25rem solid colors.$purple-light;
  }

  &--error {
    @extend %ods-margin-bottom-1;
  }

  &__label {
    @include mixins.form-label;
  }

  &__required {
    @extend %ods-margin-top-1;

    padding: 0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    &::before {
      content: "* ";
    }

    &--optional::before {
      content: none;
    }
  }

  &__error-message {
    @include mixins.error-message;
  }

  &__counter-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0.125rem;
    right: 1rem;

  }

  &__counter-button {
    @extend %ods-text--size-juliett;
    @extend %ods-text--weight-light;

    border: none;
    background: none;
    cursor: pointer;
    height: 1.25rem;
    line-height: 0;
    padding: 0;
    text-align: center;
    user-select: none;
    width: 1.25rem;
  }
}