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

React component library

/* stylelint-disable */
.FormControlCarcass {
  --form-control-carcass-control-block-margin: 0px;
  --form-control-carcass-after-block-margin: 0px;
  --form-control-content-gap: 0px;
  --form-control-label-color: var(--color-content-primary);
  box-sizing: border-box;
  display: inline-flex;
  cursor: pointer;
  vertical-align: top;
  flex-direction: row;
}
.FormControlCarcass_size_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);

      --form-control-content-gap: var(--spacing-2xs);
    }
.FormControlCarcass_size_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);

      --form-control-content-gap: var(--spacing-2xs);
    }
.FormControlCarcass_size_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);

      --form-control-content-gap: var(--spacing-xs);
      --form-control-carcass-control-block-margin: var(--spacing-4xs);
      --form-control-carcass-after-block-margin: var(--spacing-4xs);
    }
.FormControlCarcass_size_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);

      --form-control-content-gap: var(--spacing-xs);
      --form-control-carcass-control-block-margin: var(--spacing-4xs);
    }
.FormControlCarcass_size_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);

      --form-control-content-gap: var(--spacing-s);
      --form-control-carcass-control-block-margin: var(--spacing-3xs);
      --form-control-carcass-after-block-margin: var(--spacing-4xs);
    }
.FormControlCarcass_align_top {
      align-items: flex-start;
    }
.FormControlCarcass_align_bottom {
      align-items: flex-end;
    }
.FormControlCarcass_align_center {
      align-items: center;
    }
.FormControlCarcass_mirrored {
    flex-direction: row-reverse;
  }
.FormControlCarcass_mirrored .FormControlCarcass-Content, .FormControlCarcass_mirrored .FormControlCarcass-After {
      margin-inline: 0 var(--form-control-content-gap);
    }
.FormControlCarcass::after {
    display: inline-block;
    inline-size: 0;
    overflow: hidden;
    content: '\a0';
  }
.FormControlCarcass-Control {
    box-sizing: border-box;
    flex-shrink: 0;
    margin-block: var(--form-control-carcass-control-block-margin);
  }
.FormControlCarcass-Content {
    margin-inline-start: var(--form-control-content-gap);
    color: var(--form-control-label-color);
    transition: color var(--transition-default);
  }
.FormControlCarcass-After {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--form-control-content-gap);
    margin-block: var(--form-control-carcass-after-block-margin);
  }
.FormControlCarcass_disabled {
    --form-control-label-color: var(--color-content-disabled);
    cursor: default;
    pointer-events: none;
  }