chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.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
 * #import=../cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  --cr-icon-button-fill-color: currentColor;
  --cr-icon-button-icon-start-offset: 0;
  --cr-icon-button-icon-size: 20px;
  --cr-icon-button-size: 32px;
  --cr-icon-button-height: var(--cr-icon-button-size);
  --cr-icon-button-transition: 150ms ease-in-out;
  --cr-icon-button-width: var(--cr-icon-button-size);
  /* Copied from paper-fab.html. Prevents square touch highlight. */
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  color: var(--cr-icon-button-stroke-color,
      var(--cr-icon-button-fill-color));
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--cr-icon-button-height);
  margin-inline-end: var(--cr-icon-button-margin-end,
      var(--cr-icon-ripple-margin));
  margin-inline-start: var(--cr-icon-button-margin-start);
  outline: none;
  overflow: hidden;
  position: relative;
  user-select: none;
  vertical-align: middle;
  width: var(--cr-icon-button-width);
}

:host(:hover) {
  background-color: var(--cr-icon-button-hover-background-color,
      var(--cr-hover-background-color));
}

:host(:focus-visible:focus) {
  box-shadow: inset 0 0 0 2px var(--cr-icon-button-focus-outline-color,
      var(--cr-focus-outline-color));
}

@media (forced-colors: active) {
  :host(:focus-visible:focus) {
    /* Use outline instead of box-shadow (which does not work) in Windows
       HCM. */
    outline: var(--cr-focus-outline-hcm);
  }
}

#ink {
  --paper-ripple-opacity: 1;
  color: var(--cr-icon-button-active-background-color,
      var(--cr-active-background-color));
}

:host([disabled]) {
  cursor: initial;
  opacity: var(--cr-disabled-opacity);
  pointer-events: none;
}

:host(.no-overlap) {
  --cr-icon-button-margin-end: 0;
  --cr-icon-button-margin-start: 0;
}

:host-context([dir=rtl]):host(
    :not([suppress-rtl-flip]):not([multiple-icons_])) {
  transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
}

:host-context([dir=rtl]):host(
    :not([suppress-rtl-flip])[multiple-icons_]) cr-icon {
  transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
}

:host(:not([iron-icon])) #maskedImage {
  -webkit-mask-image: var(--cr-icon-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--cr-icon-button-icon-size);
  -webkit-transform: var(--cr-icon-image-transform, none);
  background-color: var(--cr-icon-button-fill-color);
  height: 100%;
  transition: background-color var(--cr-icon-button-transition);
  width: 100%;
}

@media (forced-colors: active) {
  :host(:not([iron-icon])) #maskedImage {
    background-color: ButtonText;
  }
}

#icon {
  align-items: center;
  border-radius: 4px;
  display: flex;
  height: 100%;
  justify-content: center;
  padding-inline-start: var(--cr-icon-button-icon-start-offset);
  /* The |_rippleContainer| must be position relative. */
  position: relative;
  width: 100%;
}

cr-icon {
  --iron-icon-fill-color: var(--cr-icon-button-fill-color);
  --iron-icon-stroke-color: var(--cr-icon-button-stroke-color, none);
  --iron-icon-height: var(--cr-icon-button-icon-size);
  --iron-icon-width: var(--cr-icon-button-icon-size);
  transition: fill var(--cr-icon-button-transition),
      stroke var(--cr-icon-button-transition);
}

@media (prefers-color-scheme: dark) {
  :host {
    --cr-icon-button-fill-color: var(--google-grey-500);
  }
}