@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(form-item) {
  margin-top: 16px;

  @include when(topless) {
    margin-top: 0;
  }

  %small-typo {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  %error-help-text {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    @extend %small-typo;

    .#{$namespace}-icon {
      margin-right: 4px;
    }
  }

  @include e(error) {
    @extend %error-help-text;
    color: getCssVar('color-red-4');
  }

  @include e(help-text) {
    @extend %error-help-text;
    color: getCssVar('color-neutral-6');
  }

  @include e(label) {
    display: block;
    @extend %small-typo;
    color: getCssVar('color-neutral-6');
    margin-bottom: 4px;
  }

  @include e(value) {
    font-size: 16px;
    color: getCssVar('color-neutral-9');

    &:empty::before {
      content: '—';
    }
  }

  @include when(focused) {
    @include e(label) {
      color: getCssVar('color-primary');
    }
  }

  @include when(error) {
    @include e(label) {
      color: getCssVar('color-red-4');
    }
  }
}