/*
 * Copyright 2021 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.
 */

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

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

: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;
  mask: var(--icon-url) center / contain no-repeat;

  /* Default to a (scaled) 1x1 filled mask image, so that the `Icon` renders as transparent until a "name" is set */
  --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 ");
}

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