/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */

@mixin utrecht-number-badge {
  /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0 0% 0%)));
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
  border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
  border-style: solid;
  border-width: max(
    var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)),
    var(--_utrecht-number-badge-min-border-width, 0)
  );
  color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0 0% 100%)));
  display: inline-block;
  font-family: var(
    --utrecht-number-badge-font-family,
    var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif))
  );
  font-size: var(--utrecht-number-badge-font-size, var(--utrecht-badge-font-size));
  font-style: var(--utrecht-number-badge-font-style, normal); /* no inheritance */
  font-weight: var(--utrecht-number-badge-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */
  line-height: 1;
  max-block-size: max-content;
  max-inline-size: max-content;
  min-block-size: var(
    --utrecht-number-badge-min-block-size,
    var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em))
  );
  min-inline-size: var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em));
  padding-block-end: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
  padding-block-start: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
  padding-inline-end: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
  padding-inline-start: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
  text-align: center;
  text-decoration: none; /* no inheritance */
  white-space: nowrap;
}

@mixin utrecht-number-badge--media-query-forced-colors {
  @media screen and (forced-colors: active) {
    /* Warning: there layout difference because of the added 1px border */
    --_utrecht-number-badge-min-border-width: 1px;

    border-color: currentColor;
  }
}