@kelvininc/ui-components/dist/collection/components/radio-list-item/radio-list-item.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --radio-list-item-background: Background color.
   * @prop --radio-list-item-background-hover: Background color on hover.
   * @prop --radio-list-item-background-checked: Background color when checked.
   * @prop --radio-list-item-label-color: Label text color.
   * @prop --radio-list-item-label-color-hover: Label text color on hover.
   * @prop --radio-list-item-label-color-checked: Label text color when checked.
   * @prop --radio-list-item-label-color-disabled: Label text color when disabled.
   * @prop --radio-list-item-description-color: Description text color.
   * @prop --radio-list-item-description-color-disabled: Description text color when disabled.
   * @prop --radio-list-item-border: Border property (width, style, color).
   * @prop --radio-list-item-border-color-hover: Border color on hover.
   * @prop --radio-list-item-border-color-checked: Border color when checked.
   * @prop --radio-list-item-border-radius: Border radius.
   * @prop --radio-list-item-padding-large: Content padding when size is large.
   * @prop --radio-list-item-padding-small: Content padding when size is small.
   * @prop --radio-list-item-gap-large: Gap between radio and info content when size is large.
   * @prop --radio-list-item-gap-small: Gap between radio and info content when size is small.
   */
  --radio-list-item-background: var(--background-container-radio-selector-default);
  --radio-list-item-background-hover: var(--background-container-radio-selector-default);
  --radio-list-item-background-checked: var(--background-container-radio-selector-default);
  --radio-list-item-label-color: var(--text-interactive-card-radio-selector-default);
  --radio-list-item-label-color-hover: var(--text-interactive-card-radio-selector-hover);
  --radio-list-item-label-color-checked: var(--text-interactive-card-radio-selector-selected);
  --radio-list-item-label-color-disabled: var(--text-interactive-card-disabled);
  --radio-list-item-description-color: var(--text-container-neutral-subtle);
  --radio-list-item-description-color-disabled: var(--text-container-neutral-disabled);
  --radio-list-item-border: 1px solid var(--border-persistent-card-radio-selector-default);
  --radio-list-item-border-color-hover: var(--border-persistent-card-radio-selector-hover);
  --radio-list-item-border-color-checked: var(--border-persistent-card-radio-selector-seleted);
  --radio-list-item-border-radius: var(--radius-md);
  --radio-list-item-padding-large: var(--spacing-2xl);
  --radio-list-item-padding-small: var(--spacing-xs) var(--spacing-2xl) var(--spacing-xs) var(--spacing-md);
  --radio-list-item-gap-large: var(--spacing-md);
  --radio-list-item-gap-small: var(--spacing-none);
}

.radio-list-item-container {
  display: flex;
  flex-direction: column;
  background: var(--radio-list-item-background);
  border: var(--radio-list-item-border);
  border-radius: var(--radio-list-item-border-radius);
  transition: border-color 0.25s ease-in-out, background 0.25s ease-in-out;
  outline: none;
  cursor: pointer;
  user-select: none;
  pointer-events: all;
}
.radio-list-item-container .info {
  flex: 1;
  min-width: 0;
}
.radio-list-item-container .info .label {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--radio-list-item-label-color);
}
.radio-list-item-container .info .description {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--radio-list-item-description-color);
}
.radio-list-item-container .info .description kv-link::part(container) {
  display: inline;
}
.radio-list-item-container:hover:not(.radio-list-item-container--checked):not(.radio-list-item-container--disabled) {
  background: var(--radio-list-item-background-hover);
  border-color: var(--radio-list-item-border-color-hover);
}
.radio-list-item-container:hover:not(.radio-list-item-container--checked):not(.radio-list-item-container--disabled) .info .label {
  color: var(--radio-list-item-label-color-hover);
}
.radio-list-item-container--checked:not(.radio-list-item-container--disabled) {
  background: var(--radio-list-item-background-checked);
  border-color: var(--radio-list-item-border-color-checked);
}
.radio-list-item-container--checked:not(.radio-list-item-container--disabled) .info .label {
  color: var(--radio-list-item-label-color-checked);
}
.radio-list-item-container--disabled {
  cursor: not-allowed;
  user-select: none;
}
.radio-list-item-container--disabled .info .label {
  color: var(--radio-list-item-label-color-disabled);
}
.radio-list-item-container--disabled .info .description {
  color: var(--radio-list-item-description-color-disabled);
}
.radio-list-item-container .content {
  display: flex;
  align-items: center;
  padding: var(--radio-list-item-padding-large);
  gap: var(--radio-list-item-gap-large);
}
.radio-list-item-container .content--size-small {
  gap: var(--radio-list-item-gap-small);
  padding: var(--radio-list-item-padding-small);
}