@ozen-ui/kit/__inner__/cjs/components/Chip/Chip.css

React component library

/* stylelint-disable */
.Chip {
  --chip-border-radius: 24px;
  display: inline-flex;
  border-radius: var(--chip-border-radius);
}
.Chip_size_xs {
      font: var(--typography-text-2xs-font);
      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
      text-transform: var(--typography-text-2xs-text_transform, none);

      --chip-min-width: 64px;
      --chip-height: var(--spacing-m);
      --chip-padding-x: var(--spacing-xs);
    }
.Chip_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);

      --chip-min-width: 72px;
      --chip-height: var(--spacing-l);
      --chip-padding-x: var(--spacing-s);
    }
.Chip_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);

      --chip-min-width: 80px;
      --chip-height: var(--spacing-xl);
      --chip-padding-x: 20px;
    }
.Chip_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);

      --chip-min-width: 88px;
      --chip-height: var(--spacing-2xl);
      --chip-padding-x: var(--spacing-m);
    }
.Chip_color_primary {
      --chip-bg-color: var(--color-background-action-light);
      --chip-bg-color-hover: var(--color-background-action-light-hover);
      --chip-bg-color-active: var(--color-background-action-light-pressed);
      --chip-text-color: var(--color-content-action-dark);
    }
.Chip_color_secondary {
      --chip-bg-color: var(--color-background-secondary);
      --chip-bg-color-hover: var(--color-background-secondary-hover);
      --chip-bg-color-active: var(--color-background-secondary-pressed);
      --chip-text-color: var(--color-content-primary);
    }
.Chip-Content {
    --chip-cursor-style: pointer;
    background-color: var(--chip-bg-color);
    block-size: var(--chip-height);
    color: var(--chip-text-color);
    padding: 0 var(--chip-padding-x);
    border-radius: var(--chip-border-radius);
    gap: var(--spacing-2xs);
    transition:
      border-color var(--transition-default),
      color var(--transition-default),
      background-color var(--transition-default),
      box-shadow var(--transition-default);
    cursor: var(--chip-cursor-style);
    min-inline-size: var(--chip-min-width);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    inline-size: 100%;
    box-sizing: border-box;
  }
.Chip-Content:hover {
      --chip-bg-color: var(--chip-bg-color-hover);
    }
.Chip-Content:active {
      --chip-bg-color: var(--chip-bg-color-active);
    }
.Chip-Input {
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }
.Chip-Input:focus + .Chip-Content {
      box-shadow: var(--shadow-outline-focused);
    }
.Chip-Input:focus:not(:focus-visible) + .Chip-Content {
      box-shadow: none;
    }
.Chip-Input:checked + .Chip-Content {
      --chip-bg-color: var(--color-background-action);
      --chip-text-color: var(--color-content-action-on);
    }
.Chip-Input:disabled + .Chip-Content {
      --chip-cursor-style: auto;
      --chip-bg-color: var(--color-background-disabled);
      --chip-text-color: var(--color-content-disabled);
    }
.Chip-Icon {
    color: inherit;
  }