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

React component library

/* stylelint-disable */
.Segment {
  --segment-padding: var(--control-padding-3xs);
  background-color: var(--segment-background-color);
  border-radius: var(--segment-border-radius);
  block-size: var(--segment-height);
  padding: var(--segment-padding);
  margin: 0;
  border: none;
  display: flex;
  white-space: nowrap;
  box-sizing: border-box;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
}
.Segment_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);

      --segment-border-radius: var(--border-radius-l);
      --segment-item-border-radius: var(--border-radius-m);
      --segment-height: var(--control-height-2xs);
      --segment-item-padding-vertical: 6px;
      --segment-item-padding-horizontal: 12px;
    }
.Segment_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);

      --segment-border-radius: var(--border-radius-l);
      --segment-item-border-radius: var(--border-radius-m);
      --segment-height: var(--control-height-xs);
      --segment-item-padding-vertical: 10px;
      --segment-item-padding-horizontal: 12px;
    }
.Segment_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);

      --segment-border-radius: var(--border-radius-xl);
      --segment-item-border-radius: var(--border-radius-l);
      --segment-height: var(--control-height-s);
      --segment-item-padding-vertical: 12px;
      --segment-item-padding-horizontal: 16px;
    }
.Segment_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);

      --segment-border-radius: var(--border-radius-xl);
      --segment-item-border-radius: var(--border-radius-l);
      --segment-height: var(--control-height-m);
      --segment-item-padding-vertical: 14px;
      --segment-item-padding-horizontal: 20px;
    }
.Segment_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);

      --segment-border-radius: var(--border-radius-xl);
      --segment-item-border-radius: var(--border-radius-l);
      --segment-height: var(--control-height-l);
      --segment-item-padding-vertical: 16px;
      --segment-item-padding-horizontal: 24px;
    }
.Segment_variant_primary {
      --segment-background-color: var(--color-background-primary);
    }
.Segment_variant_secondary {
      --segment-background-color: var(--color-background-secondary);
    }
.Segment_selectedColor_main {
      --segment-selected-item-background-color: var(--color-background-main);
      --segment-selected-item-text-color: var(--color-content-primary);
    }
.Segment_selectedColor_action {
      --segment-selected-item-background-color: var(--color-background-action);
      --segment-selected-item-text-color: var(--color-content-action-on);
    }
.Segment_fullWidth {
    inline-size: 100%;
  }
.Segment_fullWidth .SegmentItem {
      flex: 1 1 auto;
      justify-content: center;
    }
.Segment_disabled.Segment_selectedColor_action {
      --segment-selected-item-background-color: var(
        --color-background-action-active-disabled
      );
    }