@ozen-ui/kit/__inner__/esm/components/Radio/Radio.css

React component library

.Radio {
  inline-size: var(--radio-size, 20px);
  block-size: var(--radio-size, 20px);
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
}

  .Radio_size_l,
  .Radio_size_m {
    --radio-size: 20px;
    --radio-icon-size: 10px;
  }

  .Radio_size_s,
  .Radio_size_xs,
  .Radio_size_2xs {
    --radio-size: 16px;
    --radio-icon-size: 8px;
  }

.Radio-Box {
  inline-size: 100%;
  block-size: 100%;
  position: relative;
  display: block;
  border-radius: inherit;
  box-sizing: border-box;
  border: 1px solid var(--color-border-main);
  background-color: var(--color-background-primary);
  transition: border-color var(--transition-default),
    background-color var(--transition-default),
    box-shadow var(--transition-default);
}

.Radio-Box::after {
    position: absolute;
    content: ' ';
    inline-size: var(--radio-icon-size, 10px);
    block-size: var(--radio-icon-size, 10px);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    background-color: var(--color-content-action-on);
    transition: opacity var(--transition-default);
  }

.Radio-Input {
  position: absolute;
  margin: 0;
  opacity: 0;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  cursor: pointer;
  z-index: var(--z-index-absolute);
}

.Radio-Input:hover:not(:checked, :disabled) + .Radio-Box {
    background-color: var(--color-background-primary-hover);
    border-color: var(--color-border-main-hover);
  }

.Radio-Input:hover:checked:not(:active, :disabled) + .Radio-Box {
    background-color: var(--color-background-action-hover);
    border-color: var(--color-background-action-hover);
  }

.Radio-Input:active:not(:checked, :disabled) + .Radio-Box {
    background-color: var(--color-background-primary-pressed);
    border-color: var(--color-border-main-hover);
  }

.Radio-Input:active:checked + .Radio-Box {
    background-color: var(--color-background-action-pressed);
    border-color: var(--color-background-action-pressed);
  }

.Radio-Input:focus + .Radio-Box {
    box-shadow: var(--shadow-outline-focused);
  }

.Radio-Input:focus:not(:focus-visible) + .Radio-Box {
    box-shadow: none;
  }

.Radio-Input:checked:not(:hover, :active) + .Radio-Box {
    background-color: var(--color-background-action);
    border-color: var(--color-background-action);
  }

.Radio-Input:checked + .Radio-Box::after {
    opacity: 1;
  }

.Radio_disabled {
  pointer-events: none;
}

.Radio_disabled .Radio-Box {
    background-color: var(--color-background-disabled);
    border-color: var(--color-border-disabled);
  }

.Radio_disabled .Radio-Input:checked + .Radio-Box {
    background-color: var(--color-background-action-active-disabled);
    border-color: var(--color-background-action-active-disabled);
  }