chromium/chrome/browser/resources/side_panel/customize_chrome/check_mark_wrapper.css

/* Copyright 2024 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-lit
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  --customize-chrome-check-mark-wrapper-background: var(
      --color-side-panel-customize-chrome-theme-checkmark-background);
  --customize-chrome-check-mark-wrapper-color: var(
      --color-side-panel-customize-chrome-theme-checkmark-foreground);
  --customize-chrome-check-mark-wrapper-end: -4px;
  --customize-chrome-check-mark-wrapper-size: 20px;
  --customize-chrome-check-mark-wrapper-top: -6px;
  --customize-chrome-check-mark-wrapper-check-mark-size: 20px;
  display: block;
  position: relative;
}

#circle {
  background-color: var(--customize-chrome-check-mark-wrapper-background);
  border-radius: 50%;
  display: block;
  height: var(--customize-chrome-check-mark-wrapper-size);
  left: initial;
  position: absolute;
  right: var(--customize-chrome-check-mark-wrapper-end);
  top: var(--customize-chrome-check-mark-wrapper-top);
  width: var(--customize-chrome-check-mark-wrapper-size);
  z-index: 1;
}

:host(:not([checked])) #circle {
  display: none;
}

:host-context([dir=rtl]) #circle {
  left: var(--customize-chrome-check-mark-wrapper-end);
  right: initial;
}

svg {
  height: var(--customize-chrome-check-mark-wrapper-check-mark-size);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--customize-chrome-check-mark-wrapper-check-mark-size);
}

#checkMark {
  fill: var(--customize-chrome-check-mark-wrapper-color);
}

:host([checked]):host(:not([checkmark-border-hidden])) ::slotted(*) {
  border: 2px solid
      var(--customize-chrome-check-mark-wrapper-background) !important;
}