front_end/ui/radioButton.css

/*
 * Copyright (c) 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

::slotted(input.dt-radio-button) {
  --gradient-start: #fcfcfc;
  --gradient-end: #dfdfdf;
  --radio-dot: url(Images/radioDot.png);

  height: 17px;
  width: 17px;
  min-width: 17px;
  border: 1px solid #a5a5a5;
  background-image: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
  border-radius: 8px;
  appearance: none;
  vertical-align: middle;
  margin: 0 5px 5px 0;
}

::slotted(input.dt-radio-button:checked) {
  background:
    var(--radio-dot) center no-repeat,
    linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
}

::slotted(input.dt-radio-button:focus) {
  box-shadow: var(--focus-ring-active-shadow);
}

:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button) {
  --gradient-start: #030303;
  --gradient-end: #202020;
  --radio-dot: url(Images/radioDot-dark-theme.png);
}

::slotted(input.dt-radio-button:checked:active),
::slotted(input.dt-radio-button:active:not(:disabled)) {
  --gradient-start: #c2c2c2;
  --gradient-end: #efefef;
}

:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button:checked:active),
:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button:active:not(:disabled)) {
  --gradient-start: #3d3d3d;
  --gradient-end: #101010;
}

@media (forced-colors: active) {
  ::slotted(input.dt-radio-button) {
    --gradient-start: ButtonFace;
    --gradient-end: ButtonFace;
  }

  ::slotted(input.dt-radio-button:checked) {
    --gradient-start: Highlight;
    --gradient-end: Highlight;
  }
}