@ozen-ui/kit/__inner__/esm/components/FieldControl/FieldControl.css

React component library

/* stylelint-disable */
.FieldControl {
  --textfield-color: var(--color-content-primary);
  --textfield-border-width: var(--border-width-s);
  --textfield-border-color: var(--color-border-main);
  --textfield-placeholder-color: var(--color-content-tertiary);
  --textfield-background-color: var(--color-background-primary);
  cursor: text;
  vertical-align: top;
  display: inline-flex;
  flex-direction: column;
}
.FieldControl > * {
    cursor: text;
  }
.FieldControl_size_2xs {
      --textfield-input-padding: 8px 0;
      --textfield-input-gap: var(--spacing-2xs);
      --textfield-gutter-x: var(--control-padding-xs);
      --textfield-border-radius: var(--border-radius-m);
      --textfield-input-height: var(--control-height-2xs);

      font: var(--typography-text-2xs-font);

      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);

      text-transform: var(--typography-text-2xs-text_transform, none);
    }
.FieldControl_size_xs {
      --textfield-input-padding: 12px 0;
      --textfield-input-gap: var(--spacing-2xs);
      --textfield-gutter-x: var(--control-padding-xs);
      --textfield-border-radius: var(--border-radius-m);
      --textfield-input-height: var(--control-height-xs);

      font: var(--typography-text-xs-font);

      letter-spacing: var(--typography-text-xs-letter_spacing, 0);

      text-transform: var(--typography-text-xs-text_transform, none);
    }
.FieldControl_size_s {
      --textfield-input-padding: 14px 0;
      --textfield-input-gap: var(--spacing-xs);
      --textfield-gutter-x: var(--control-padding-s);
      --textfield-border-radius: var(--border-radius-l);
      --textfield-input-height: var(--control-height-s);

      font: var(--typography-text-s-font);

      letter-spacing: var(--typography-text-s-letter_spacing, 0);

      text-transform: var(--typography-text-s-text_transform, none);
    }
.FieldControl_size_m {
      --textfield-input-padding: 16px 0;
      --textfield-input-gap: var(--spacing-xs);
      --textfield-gutter-x: var(--control-padding-m);
      --textfield-border-radius: var(--border-radius-l);
      --textfield-input-height: var(--control-height-m);

      font: var(--typography-text-m-font);

      letter-spacing: var(--typography-text-m-letter_spacing, 0);

      text-transform: var(--typography-text-m-text_transform, none);
    }
.FieldControl_size_l {
      --textfield-input-padding: 18px 0;
      --textfield-input-gap: var(--spacing-s);
      --textfield-gutter-x: var(--control-padding-l);
      --textfield-border-radius: var(--border-radius-l);
      --textfield-input-height: var(--control-height-l);

      font: var(--typography-text-l-font);

      letter-spacing: var(--typography-text-l-letter_spacing, 0);

      text-transform: var(--typography-text-l-text_transform, none);
    }
.FieldControl_hasLabel.FieldControl_size_2xs {
        --textfield-input-padding: 8px 0 8px;
      }
.FieldControl_hasLabel.FieldControl_size_xs {
        --textfield-input-padding: 20px 0 4px;
      }
.FieldControl_hasLabel.FieldControl_size_s {
        --textfield-input-padding: 22px 0 6px;
      }
.FieldControl_hasLabel.FieldControl_size_m {
        --textfield-input-padding: 24px 0 8px;
      }
.FieldControl_hasLabel.FieldControl_size_l {
        --textfield-input-padding: 28px 0 8px;
      }
.FieldControl_hasLabel .FieldInput::placeholder {
        opacity: 0;
        color: var(--textfield-placeholder-color);
      }
.FieldControl_hasLabel .FieldInput:focus::placeholder {
        opacity: 1;
      }
.FieldControl .FieldLabel_shrink + .FieldInput::placeholder {
          opacity: 1;
        }
.FieldControl_fullWidth {
    inline-size: 100%;
  }
.FieldControl_disableStroke {
    --textfield-border-color: transparent;
  }
.FieldControl:hover {
    --textfield-border-color: var(--color-border-main-hover);
  }
.FieldControl_focused,
  .FieldControl_focused:hover {
    --textfield-border-color: var(--color-border-action);
    --textfield-background-color: var(--color-background-main);
  }
.FieldControl_error,
  .FieldControl_error.FieldControl:hover,
  .FieldControl_error.FieldControl_focused,
  .FieldControl_error.FieldControl_disableStroke,
  .FieldControl_error.FieldControl_focused:hover {
    --textfield-border-color: var(--color-border-error);
  }
.FieldControl_disabled {
    --textfield-color: var(--color-content-secondary);
    --textfield-border-color: var(--color-border-disabled);
    --textfield-background-color: var(--color-background-disabled);
    cursor: default;
    pointer-events: none;
  }
.FieldControl_disableStroke.FieldControl_disabled {
    --textfield-border-color: transparent;
  }