chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style.css

/* Copyright 2022 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style
 * #scheme=relative
 * #import=../cr_shared_vars.css.js
 * #import=../cr_shared_vars.css.js
 * #css_wrapper_metadata_end */


/* Common radio-button styling for Material Design WebUI. */
      :host {
        --cr-radio-button-checked-color:
            var(--color-radio-button-foreground-checked,
                var(--cr-fallback-color-primary));
        --cr-radio-button-checked-ripple-color:
            var(--cr-active-background-color);
        --cr-radio-button-ink-size: 32px;
        --cr-radio-button-size: 16px;
        --cr-radio-button-unchecked-color:
        var(--color-radio-button-foreground-unchecked,
            var(--cr-fallback-color-outline));
        --cr-radio-button-unchecked-ripple-color:
            var(--cr-active-background-color);

        --ink-to-circle: calc((var(--cr-radio-button-ink-size) -
                               var(--cr-radio-button-size)) / 2);
        align-items: center;
        display: flex;
        flex-shrink: 0;
        gap: var(--cr-radio-button-label-spacing, 20px);
        outline: none;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --cr-radio-button-checked-color: var(--google-blue-300);
          --cr-radio-button-checked-ripple-color:
              rgba(var(--google-blue-300-rgb), .4);
          --cr-radio-button-unchecked-color: var(--google-grey-500);
          --cr-radio-button-unchecked-ripple-color:
              rgba(var(--google-grey-300-rgb), .4);
        }
      }

      @media (forced-colors: active) {
        :host {
          --cr-radio-button-checked-color: SelectedItem;
          forced-color-adjust: none;
        }
      }

      :host([disabled]) {
        opacity: 1;
        /* Disable pointer events for this whole element, as outer on-click gets
         * triggered when clicking anywhere in :host. */
        pointer-events: none;
        --cr-radio-button-checked-color: var(--color-radio-foreground-disabled,
            var(--cr-fallback-color-disabled-background));
        --cr-radio-button-unchecked-color:
            var(--color-radio-foreground-disabled,
                var(--cr-fallback-color-disabled-background));
      }

      :host(:not([disabled])) {
        cursor: pointer;
      }

      :host(.label-first) {
        flex-direction: row-reverse;
      }

      #labelWrapper {
        flex: 1;
      }

      :host([disabled]) #labelWrapper {
        opacity: var(--cr-disabled-opacity);
      }

      #label {
        color: inherit;
      }

      /* Visually hide the label but allow the screen reader to pick it up. */
      :host([hide-label-text]) #label {
        clip: rect(0,0,0,0);
        display: block;
        position: fixed;
      }

      .disc-border,
      .disc,
      .disc-wrapper,
      cr-ripple,
      paper-ripple {
        border-radius: 50%;
      }

      .disc-wrapper {
        height: var(--cr-radio-button-size);
        margin-block-start: var(--cr-radio-button-disc-margin-block-start, 0);
        position: relative;
        width: var(--cr-radio-button-size);
      }

      .disc-border,
      .disc {
        box-sizing: border-box;
        height: var(--cr-radio-button-size);
        width: var(--cr-radio-button-size);
      }

      .disc-border {
        border: 2px solid var(--cr-radio-button-unchecked-color);
      }

      :host([checked]) .disc-border {
        border-color: var(--cr-radio-button-checked-color);
      }

      #button:focus {
        outline: none;
      }

      .disc {
        background-color: transparent;
        position: absolute;
        top: 0;
        transform: scale(0);
        transition: border-color 200ms, transform 200ms;
      }

      :host([checked]) .disc {
        background-color: var(--cr-radio-button-checked-color);
        transform: scale(0.5);
      }

      #overlay {
        border-radius: 50%;
        box-sizing: border-box;
        display: none;
        height: var(--cr-radio-button-ink-size);
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--cr-radio-button-ink-size);
      }

      #button:hover #overlay {
        background-color: var(--cr-hover-background-color);
        display: block;
      }

      #button:focus-visible #overlay {
        border: 2px solid var(--cr-focus-outline-color);
        display: block;
      }

      cr-ripple,
      paper-ripple {
        --paper-ripple-opacity: 1;  /* Opacity in each color's alpha. */
        color: var(--cr-radio-button-unchecked-ripple-color);
        height: var(--cr-radio-button-ink-size);
        left: calc(-1 * var(--ink-to-circle));
        pointer-events: none;
        position: absolute;
        top: calc(-1 * var(--ink-to-circle));
        transition: color linear 80ms;
        width: var(--cr-radio-button-ink-size);
      }

      :host-context([dir=rtl]) cr-ripple,
      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: calc(-1 * var(--ink-to-circle));
      }

      :host([checked]) cr-ripple,
      :host([checked]) paper-ripple {
        color: var(--cr-radio-button-checked-ripple-color);
      }