chromium/ash/webui/common/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(--google-blue-600);
  --cr-radio-button-checked-ripple-color:
      rgba(var(--google-blue-600-rgb), .2);
  --cr-radio-button-ink-size: 40px;
  --cr-radio-button-size: 16px;
  --cr-radio-button-unchecked-color: var(--google-grey-700);
  --cr-radio-button-unchecked-ripple-color:
      rgba(var(--google-grey-600-rgb), .15);

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

:host-context([chrome-refresh-2023]):host {
  --cr-radio-button-ink-size: 32px;
  --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-unchecked-color:
      var(--color-radio-button-foreground-unchecked,
          var(--cr-fallback-color-outline));
  --cr-radio-button-unchecked-ripple-color:
      var(--cr-active-background-color);
}

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

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

:host-context([chrome-refresh-2023]):host([disabled]) {
  opacity: 1;
  --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-context([chrome-refresh-2023]):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,
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);
}

:host-context([chrome-refresh-2023]) #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);
}

:host-context([chrome-refresh-2023]) #button:hover #overlay {
  background-color: var(--cr-hover-background-color);
  display: block;
}

:host-context([chrome-refresh-2023]) #button:focus-visible #overlay {
  border: 2px solid var(--cr-focus-outline-color);
  display: block;
}

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]) paper-ripple {
  left: auto;
  right: calc(-1 * var(--ink-to-circle));
}

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