front_end/ui/kit/icons/icon.css

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

:host {
  flex-grow: 0;
  flex-shrink: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--icon-default);
  vertical-align: sub;
  position: relative;
}

:host(.extra-small) {
  height: var(--sys-size-6);
  width: var(--sys-size-6);
}

:host(.small) {
  height: var(--sys-size-7);
  width: var(--sys-size-7);
}

:host(.medium) {
  height: var(--sys-size-8);
  width: var(--sys-size-8);
}

:host(.large) {
  height: 18px;
  width: 18px;
}

:host(.extra-large) {
  height: var(--sys-size-9);
  width: var(--sys-size-9);
}

:host(.toggled) {
  color: var(--icon-toggled);
}

:host([hidden]) {
  display: none;
}

:host([name="warning-filled"]),
:host([name="issue-exclamation-filled"]) {
  color: var(--icon-warning);
}

:host([name="cross-circle"]),
:host([name="cross-circle-filled"]),
:host([name="issue-cross-filled"]),
:host([name="small-status-dot"]) {
  color: var(--icon-error);
}

:host([name="issue-text-filled"]) {
  color: var(--icon-info);
}

:host([name="large-arrow-right-filled"]) {
  color: var(--icon-arrow-main-thread);
}

:host([name="code-circle"]) {
  color: var(--icon-link);
}

:host([name="file-document"]) {
  color: var(--icon-file-document);
}

:host([name="file-font"]) {
  color: var(--icon-file-font);
}

:host([name="file-script"]) {
  color: var(--icon-file-script);
}

:host([name="file-stylesheet"]) {
  color: var(--icon-file-styles);
}

:host([name="file-media"]) {
  color: var(--icon-file-media);
}

:host([name="triangle-up"]),
:host([name="triangle-down"]),
:host([name="triangle-left"]),
:host([name="triangle-right"]) {
  width: 14px;
  height: 14px;
  vertical-align: baseline;
}

span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentcolor;
  /* Default to a (scaled) 1x1 filled mask image, so that the `Icon` renders as transparent until a "name" is set */
  mask: var(--icon-url, url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E ")) center / contain no-repeat;
}

@media (forced-colors: active) {
  span {
    forced-color-adjust: none;
  }
}