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

React component library

.RadioNext {
  --radio-border-color-checked: var(--radio-background-color-checked);
  --radio-border-color-hover-checked: var(--radio-background-color-hover-checked);
  --radio-border-color-active-checked: var(--radio-background-color-active-checked);
}

  .RadioNext_size_l,
  .RadioNext_size_m {
    --radio-size: 20px;
    --radio-icon-size: 10px;
  }

  .RadioNext_size_s,
  .RadioNext_size_xs,
  .RadioNext_size_2xs {
    --radio-size: 16px;
    --radio-icon-size: 8px;
  }

  .RadioNext_variant_default {
    /* ---- BORDER ---- */

    --radio-border-color: var(--color-border-main);
    --radio-border-color-hover: var(--color-border-main-hover);
    --radio-border-color-active: var(--color-border-main-hover);

    /* ---- BACKGROUND ---- */

    --radio-background-color: var(--color-background-primary);
    --radio-background-color-checked: var(--color-background-action);
    --radio-background-color-hover: var(--color-background-primary-hover);
    --radio-background-color-hover-checked: var(--color-background-action-hover);
    --radio-background-color-active: var(--color-background-primary-pressed);
    --radio-background-color-active-checked: var(--color-background-action-pressed);
  }

  .RadioNext_variant_error {
    /* ---- BORDER ---- */

    --radio-border-color: var(--color-border-error);
    --radio-border-color-hover: var(--color-border-error);
    --radio-border-color-active: var(--color-border-error);

    /* ---- BACKGROUND ---- */

    --radio-background-color: var(--color-background-primary);
    --radio-background-color-checked: var(--color-background-error);
    --radio-background-color-hover: var(--color-background-primary);
    --radio-background-color-hover-checked: var(--color-background-error);
    --radio-background-color-active: var(--color-background-primary);
    --radio-background-color-active-checked: var(--color-background-error);
  }

  .RadioNext_disabled {
    /* ---- BORDER ---- */

    --radio-border-color: var(--color-border-disabled);
    --radio-border-color-hover: var(--color-border-disabled);
    --radio-border-color-active: var(--color-border-disabled);

    /* ---- BACKGROUND ---- */

    --radio-background-color: var(--color-background-disabled);
    --radio-background-color-checked: var(--color-background-action-active-disabled);
    --radio-background-color-hover: var(--color-background-disabled);
    --radio-background-color-hover-checked: var(--color-background-action-active-disabled);
    --radio-background-color-active: var(--color-background-disabled);
    --radio-background-color-active-checked: var(--color-background-action-active-disabled);
  }

  .RadioNext-Box {
    inline-size: var(--radio-size);
    block-size: var(--radio-size);
    position: relative;
    border-radius: 50%;
    flex-shrink: 0;
  }

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

  .RadioNext-BoxRadio::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);
    }

  .RadioNext-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);
  }

  .RadioNext-Input:hover:not(:checked, :disabled) + .RadioNext-BoxRadio {
      background-color: var(--radio-background-color-hover);
      border-color: var(--radio-border-color-hover);
    }

  .RadioNext-Input:hover:checked:not(:active, :disabled) + .RadioNext-BoxRadio {
      background-color: var(--radio-background-color-hover-checked);
      border-color: var(--radio-border-color-hover-checked);
    }

  .RadioNext-Input:active:not(:checked, :disabled) + .RadioNext-BoxRadio {
      background-color: var(--radio-background-color-active);
      border-color: var(--radio-border-color-active);
    }

  .RadioNext-Input:active:checked + .RadioNext-BoxRadio {
      background-color: var(--radio-background-color-active-checked);
      border-color: var(--radio-border-color-active-checked);
    }

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

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

  .RadioNext-Input:checked:not(:hover, :active) + .RadioNext-BoxRadio {
      background-color: var(--radio-background-color-checked);
      border-color: var(--radio-border-color-checked);
    }

  .RadioNext-Input:checked + .RadioNext-BoxRadio::after {
      opacity: 1;
    }