@kelvininc/ui-components/dist/collection/components/radio/radio.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 --input-height-large: Radio height when size is large.
   * @prop --input-height-small: Radio height when size is small.
   * @prop --input-gap-large: Gap between radio and label when size is large.
   * @prop --input-gap-small: Gap between radio and label when size is small.
   * @prop --input-label-color: Label text color.
   * @prop --radio-input-large: Radio icon size when size is large.
   * @prop --radio-input-small: Radio icon size when size is small.
   * @prop --radio-input-default-color: Radio icon color when state is default.
   * @prop --radio-input-disabled-color: Radio icon and label color when state is disabled.
   * @prop --radio-background-default-color: Radio circle background color when state is default.
   * @prop --radio-background-hover-color: Radio circle background color when state is hovered.
   * @prop --radio-background-pressed-color: Radio circle background color when state is pressed.
   * @prop --radio-background-disabled-color: Radio circle background color when state is disabled.
   */
  --input-height-large: var(--input-height-regular);
  --input-height-small: var(--input-height-compact);
  --input-gap-large: var(--spacing-none);
  --input-gap-small: var(--spacing-xs);
  --input-label-color: var(--text-surface-neutral-secondary);
  --radio-input-large: var(--size-xl);
  --radio-input-small: var(--size-default);
  --radio-input-default-color: var(--icon-persistent-indicator-on);
  --radio-input-disabled-color: var(--icon-surface-neutral-disabled);
  --radio-background-default-color: var(--transparent);
  --radio-background-hover-color: var(--overlay-interactive-opacity-10);
  --radio-background-pressed-color: var(--overlay-interactive-opacity-16);
  --radio-background-disabled-color: var(--transparent);
}

.radio-container {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
  user-select: none;
  pointer-events: all;
}
.radio-container--size-large {
  height: var(--input-height-large);
  gap: var(--input-gap-large);
}
.radio-container--size-large .circle {
  height: var(--input-height-large);
  width: var(--input-height-large);
}
.radio-container--size-large .circle ::slotted(kv-icon),
.radio-container--size-large .circle kv-icon {
  --icon-width: var(--radio-input-large);
  --icon-height: var(--radio-input-large);
}
.radio-container--size-small {
  height: var(--input-height-small);
  gap: var(--input-gap-small);
}
.radio-container--size-small .circle {
  height: var(--input-height-small);
  width: var(--input-height-small);
}
.radio-container--size-small .circle ::slotted(kv-icon),
.radio-container--size-small .circle kv-icon {
  --icon-width: var(--radio-input-small);
  --icon-height: var(--radio-input-small);
}
.radio-container.disabled {
  cursor: not-allowed;
  user-select: none;
}
.radio-container.disabled .circle {
  background-color: var(--radio-background-disabled-color);
}
.radio-container.disabled .circle ::slotted(kv-icon),
.radio-container.disabled .circle kv-icon {
  --icon-color: var(--radio-input-disabled-color);
}
.radio-container.disabled .label {
  color: var(--radio-input-disabled-color);
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  outline: none;
}
.circle:hover {
  background-color: var(--radio-background-hover-color);
}
.circle:focus, .circle:active {
  background-color: var(--radio-background-pressed-color);
}
.circle ::slotted(kv-icon),
.circle kv-icon {
  --icon-color: var(--radio-input-default-color);
  transition: all 0.2s ease-out;
}

.label {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--input-label-color);
}