/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://global/content/elements/moz-badge.tokens.css");

.moz-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  padding: 0 var(--space-xsmall);
  width: fit-content;
  color: var(--badge-text-color);
  /* Use outline so the border doesn't overlay the background and the size of
   * the badge doesn't increase */
  outline: var(--badge-border-width) solid var(--badge-border-color);
  border-radius: var(--badge-border-radius);
}

.moz-badge-icon {
  width: var(--icon-size-xsmall);
  height: var(--icon-size-xsmall);
  -moz-context-properties: fill, stroke;
  fill: var(--icon-color);
  stroke: var(--icon-color);
}

.moz-badge-label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

:host([type="new"]) {
  .moz-badge {
    color: var(--badge-text-color-filled);
    background-color: var(--badge-background-color-filled);
    outline-color: var(--badge-border-color-filled);
  }
}