@use '../../../../../styles' as *;

@mixin insertInputFieldWrapper() {
  .inputFieldWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;

    gap: 4px;

    .labelText {
      display: flex;
      padding: 0 12px;
      gap: 2px;

      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $gray-700);

      .required {
        @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $error-500);
      }
    }

    .hintText {
      display: flex;
      padding: 0 12px;
      gap: 2px;

      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $gray-600);
    }

    .hintError {
      display: flex;
      padding: 0 12px;
      gap: 2px;

      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $error-500);
    }

    .helperLink {
      display: flex;
      padding: 0 12px;
      gap: 2px;
      cursor: pointer;
      @include changeSvg($width: 20, $height: 20, $stroke: $media-500, $flex: none);
      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $media-500);
    }

    @content;
  }
}