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

React component library

/* stylelint-disable */
.ChipNext {
  --chip-outline: var(--shadow-outline-focused);
  --chip-border-radius: 24px;
  --chip-text-wrap: nowrap;
  background-color: var(--chip-bg-color);
  border-radius: var(--chip-border-radius);
  min-block-size: var(--chip-height);
  padding: 0 var(--chip-padding-x);
  min-inline-size: var(--chip-min-width);
  color: var(--chip-text-color);
  gap: var(--spacing-2xs);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  transition:
    border-color var(--transition-default),
    color var(--transition-default),
    background-color var(--transition-default),
    box-shadow var(--transition-default);
}
.ChipNext-Content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: var(--chip-text-wrap);
  }
.ChipNext-Icon {
    color: inherit;
    flex-shrink: 0;
  }
.ChipNext_multiline {
    --chip-text-wrap: normal;
  }
.ChipNext_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);
    }
.ChipNext_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);
    }
.ChipNext_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;
    }
.ChipNext_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);
    }
.ChipNext_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);
  }
.ChipNext_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);
  }
.ChipNext_color_main {
    --chip-bg-color: var(--color-background-main);
    --chip-bg-color-hover: var(--color-background-main-hover);
    --chip-bg-color-active: var(--color-background-main-pressed);
    --chip-text-color: var(--color-content-primary);
  }
.ChipNext_color_overlay {
    --chip-bg-color: var(--color-background-overlay);
    --chip-bg-color-hover: var(--color-background-overlay);
    --chip-bg-color-active: var(--color-background-overlay);
    --chip-text-color: var(--color-content-action-on);
  }
.ChipNext_color_primary.ChipNext_checked {
    --chip-bg-color: var(--color-background-action);
    --chip-bg-color-hover: var(--color-background-action);
    --chip-bg-color-active: var(--color-background-action);
    --chip-text-color: var(--color-content-action-on);
  }
.ChipNext_color_primary.ChipNext_checked.ChipNext_disabled {
    --chip-bg-color: var(--color-background-action-active-disabled);
    --chip-bg-color-hover: var(--color-background-action-active-disabled);
    --chip-bg-color-active: var(--color-background-action-active-disabled);
    --chip-text-color: var(--color-content-primary-inverse);
  }
.ChipNext_color_secondary.ChipNext_checked, .ChipNext_color_main.ChipNext_checked, .ChipNext_color_overlay.ChipNext_checked {
    --chip-bg-color: var(--color-background-action-secondary);
    --chip-bg-color-hover: var(--color-background-action-secondary);
    --chip-bg-color-active: var(--color-background-action-secondary);
    --chip-text-color: var(--color-content-action-on);
  }
.ChipNext_color_secondary.ChipNext_checked.ChipNext_disabled, .ChipNext_color_main.ChipNext_checked.ChipNext_disabled, .ChipNext_color_overlay.ChipNext_checked.ChipNext_disabled {
    --chip-bg-color: var(--color-background-action-secondary-active-disabled);
    --chip-bg-color-hover: var(--color-background-action-secondary-active-disabled);
    --chip-bg-color-active: var(--color-background-action-secondary-active-disabled);
    --chip-text-color: var(--color-content-primary-inverse);
  }
.ChipNext:hover {
    --chip-bg-color: var(--chip-bg-color-hover);
  }
.ChipNext:active {
    --chip-bg-color: var(--chip-bg-color-active);
  }
.ChipNext:focus {
    box-shadow: var(--chip-outline);
  }
.ChipNext:focus:not(:focus-visible) {
    box-shadow: none;
  }
.ChipNext_disabled {
    --chip-bg-color: var(--color-background-disabled);
    --chip-bg-color-hover: var(--color-background-disabled);
    --chip-bg-color-active: var(--color-background-disabled);
    --chip-text-color: var(--color-content-disabled);
    pointer-events: none;
  }