v4web-components/dist/collection/components/actions/lab-ds-radio-button/lab-ds-radio-button.css

Stencil Component Starter

.container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.375rem;
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
}

input[type='radio'] {
  appearance: none;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: var(--lab-ds-semantic-selectable-size-xs);
  height: var(--lab-ds-semantic-selectable-size-xs);
  border: var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type='radio']::before {
  content: '';
  width: var(--lab-ds-semantic-selectable-size-xxs);
  height: var(--lab-ds-semantic-selectable-size-xxs);
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
}

input[type='radio']:checked {
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
}

input[type='radio']:checked::before {
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);

  transform: scale(1);
}

.label-text {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.label-text.checked {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p2-bold);
}

.error.checkmark {
  border-color: var(--lab-ds-semantic-selectable-color-border-error);
  background-color: rgba(0, 0, 0, 0);
}

/* On mouse-over, add a background color */
.container:hover input:not([disabled]):not(:checked) ~ .checkmark {
  background-color: var(--lab-ds-semantic-selectable-color-primary-hover);
}

.container:active input:not([disabled]) ~ .checkmark {
  background-color: var(--lab-ds-semantic-selectable-color-primary-press);
}

.container:focus-within:not([disabled]) {
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-s);
  outline-offset: 0.4rem;
}

.container.disabled {
  opacity: var(--lab-ds-core-opacity-80);
}