@use '../../../dependencies' as *;
@use './config' as *;

@mixin insertCustomInputWrapperTags() {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;

  .label {
    width: 100%;
    height: fit-content;

    display: flex;
    padding: 0 12px;
    gap: 2px;
    @include fnt($size: 14, $weight: 500, $line_height: 20, $color: $custom-input-field-label-text-color);

    .requiredMark {
      flex: none;
      @include fnt($size: 14, $weight: 500, $line_height: 20, $color: $custom-input-field-label-required-mark-text-color);
    }
  }

  .hint {
    width: 100%;
    height: fit-content;

    padding: 0 12px;
    gap: 2px;
    @include fnt($size: 14, $weight: 400, $line_height: 20, $color: $custom-input-field-hint-text-color);
  }

  .hintError {
    width: 100%;
    height: fit-content;

    padding: 0 12px;
    gap: 2px;
    @include fnt($size: 14, $weight: 400, $line_height: 20, $color: $custom-input-field-hint-error-text-color);
  }

  .helperLink {
    width: 100%;
    height: fit-content;
    padding: 0 12px;
    gap: 2px;
    @include fnt($size: 14, $weight: 400, $line_height: 20, $color: $custom-input-field-helper-link-text-color);

    * {
      stroke: $custom-input-field-helper-link-text-color;
    }
  }
  @content;
}