@patreon/studio/module/components/Radio/RadioInput/RadioInput.module.css

Patreon Studio Design System

.radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  height: var(--global-space-x24);
  min-height: var(--global-space-x24);
  min-width: var(--global-space-x24);
  position: relative;
  width: var(--global-space-x24);
}.radio::before,.radio::after {
    border-radius: var(--global-radius-circle);
    content: '';
    position: absolute;
    z-index: 1;
  }.radio::before {
    background-color: var(--RadioInput-bg-default);
    border: 1px solid var(--RadioInput-border-default);
    box-sizing: border-box;
    height: 100%;
    opacity: var(--RadioInput-opacity);
    width: 100%;
  }.radio::after {
    background-color: var(--RadioInput-dot);
    height: var(--global-space-x8);
    left: 50%;
    margin: calc(var(--global-space-x4) * -1);
    opacity: var(--RadioInput-opacity);
    top: 50%;
    width: var(--global-space-x8);
    z-index: 2;
  }.radio:focus-visible {
    outline: 0;
  }.radio:focus-visible::before {
      /* Firefox default outline color */
      /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Used for firefox */
      outline: solid Highlight;

      /* Chrome/Safari default outline color */
      /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Used for safari */
      outline: solid -webkit-focus-ring-color;
    }.radio.isChecked {
    cursor: default;

    --RadioInput-bg-default: var(--global-primary-actionBase-default);
    --RadioInput-bg-hover: var(--global-primary-actionBase-hover);
    --RadioInput-bg-pressed: var(--global-primary-actionBase-pressed);
    --RadioInput-border-default: var(--global-primary-actionBase-default);
    --RadioInput-border-hover: var(--global-primary-actionBase-hover);
    --RadioInput-border-pressed: var(--global-primary-actionBase-pressed);
    --RadioInput-dot: var(--global-primary-onActionBase-default);
  }.radio.isUnchecked {
    --RadioInput-bg-default: var(--global-bg-base-default);
    --RadioInput-bg-hover: var(--global-bg-base-hover);
    --RadioInput-bg-pressed: var(--global-bg-base-pressed);
    --RadioInput-border-default: var(--global-border-action-default);
    --RadioInput-border-hover: var(--global-border-action-hover);
    --RadioInput-border-pressed: var(--global-border-action-pressed);
    --RadioInput-dot: transparent;
  }:is(.radio.isEnabled:hover,.radio.isEnabled:focus)::before {
        background-color: var(--RadioInput-bg-hover);
        border-color: var(--RadioInput-border-hover);
      }.radio.isEnabled:active::before {
        background-color: var(--RadioInput-bg-pressed);
        border-color: var(--RadioInput-border-pressed);
      }.radio.isDisabled {
    cursor: not-allowed !important;

    --RadioInput-opacity: var(--global-opacity-disabled);
    --RadioInput-border-default: var(--global-border-muted-default);
  }