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

React component library

.SegmentItem {
  --segment-item-delimeter-opacity: 1;
  --segment-item-background-color: transparent;
  --segment-item-text-color: var(--color-content-primary);
  --segment-item-text-color-hover: var(--color-content-secondary);
  --segment-item-gap: var(--spacing-2xs);
  gap: var(--segment-item-gap);
  color: var(--segment-item-text-color);
  padding: var(--segment-item-padding-vertical)
    var(--segment-item-padding-horizontal);
  border-radius: var(--segment-item-border-radius);
  background-color: var(--segment-item-background-color);
  transition:
    background-color var(--transition-default),
    color var(--transition-default),
    box-shadow var(--transition-default);
  block-size: calc(var(--segment-height) - 2 * var(--segment-padding));
  border: none;
  outline: none;
  display: flex;
  cursor: pointer;
  position: relative;
  align-items: center;
  box-sizing: border-box;
}

  .SegmentItem::after {
    content: '';
    position: absolute;
    inline-size: var(--border-width-s);
    inset: var(--segment-item-padding-vertical) 0;
    transition: opacity var(--transition-default);
    opacity: var(--segment-item-delimeter-opacity);
    background-color: var(--color-background-tertiary);
  }

  .SegmentItem_selected {
    --segment-item-background-color: var(
      --segment-selected-item-background-color
    );
    --segment-item-text-color: var(--segment-selected-item-text-color);
  }

  .SegmentItem_selected,
  .SegmentItem_selected + .SegmentItem,
  .SegmentItem:first-of-type {
    --segment-item-delimeter-opacity: 0;
  }

  .SegmentItem:not(.SegmentItem_disabled,.SegmentItem_selected):hover {
    color: var(--color-content-secondary);
  }

  .SegmentItem_disabled {
    cursor: auto;
  }

  .SegmentItem_disabled:not(.SegmentItem_selectedColor_action) {
    --segment-item-text-color: var(--color-content-disabled);
  }

  .SegmentItem-Icon {
    flex-shrink: 0;
  }

  .SegmentItem-Radio {
    inset: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  .SegmentItem-Radio:focus + .SegmentItem-Box {
      box-shadow: inset var(--shadow-outline-focused);
    }

  .SegmentItem-Radio:focus:not(:focus-visible) + .SegmentItem-Box {
      box-shadow: none;
    }

  .SegmentItem-Box {
    inset: 0;
    position: absolute;
    border-radius: var(--segment-item-border-radius);
  }