@import url("/fonts/plus-jakarta-sans/font.css");

/* abafr-tag 1.0.0 - standalone stylesheet */
abafr-tag {
  --tag-color: var(--abafr-tag-color, #337ea9);
  --tag-color-soft: var(--abafr-tag-color-soft, color-mix(in srgb, var(--tag-color) 18%, white));
  --tag-color-border: var(--abafr-tag-color-border, color-mix(in srgb, var(--tag-color) 48%, white));
  --tag-text-color: var(--abafr-tag-text-color, color-mix(in srgb, var(--tag-color) 68%, black));
  --tag-solid-color: var(--tag-color);
  --tag-solid-contrast: var(--abafr-tag-solid-contrast, white);
  --tag-radius: .2em;
  --tag-radius-pill: 999px;
  --tag-radius-sharp: 0;
  --font-family: "Plus Jakarta Sans", ui-serif;
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: .35em;
  font-size: .9em;
  font-family: var(--abafr-tag-font-family, var(--font-family));
  user-select: none;
  white-space: nowrap;
}

abafr-tag.primary, abafr-tag.default { --tag-color: var(--abafr-tag-primary, #37352f); --tag-solid-contrast: white; }
abafr-tag.neutral, abafr-tag.gray { --tag-color: var(--abafr-tag-neutral, #6f6e69); --tag-solid-contrast: white; }
abafr-tag.earth, abafr-tag.brown { --tag-color: var(--abafr-tag-earth, #93553a); --tag-solid-contrast: white; }
abafr-tag.highlight, abafr-tag.yellow { --tag-color: var(--abafr-tag-highlight, #cb912f); --tag-solid-contrast: black; }
abafr-tag.secondary, abafr-tag.purple { --tag-color: var(--abafr-tag-secondary, #9065b0); --tag-solid-contrast: black; }
abafr-tag.unavailable, abafr-tag.no-blocks { --tag-color: var(--abafr-tag-unavailable, #6b478a); --tag-solid-contrast: white; }
abafr-tag.accent, abafr-tag.pink { --tag-color: var(--abafr-tag-accent, #c14c8a); --tag-solid-contrast: black; }
abafr-tag.success, abafr-tag.ok, abafr-tag.green { --tag-color: var(--abafr-tag-success, #448361); --tag-solid-contrast: black; }
abafr-tag.danger, abafr-tag.error, abafr-tag.red { --tag-color: var(--abafr-tag-danger, #d44c47); --tag-solid-contrast: black; }
abafr-tag.warning, abafr-tag.orange { --tag-color: var(--abafr-tag-warning, #d9730d); --tag-solid-contrast: black; }
abafr-tag.info, abafr-tag.processing, abafr-tag.blue { --tag-color: var(--abafr-tag-info, #337ea9); --tag-solid-contrast: black; }

abafr-tag > .abafr-tag-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

abafr-tag > :not(.abafr-tag-label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  padding: .34em;
  font-size: inherit;
  line-height: 1;
  font-weight: 700;
  text-transform: lowercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

abafr-tag > a:not(.abafr-tag-label) { text-decoration: none; }

abafr-tag > :not(.abafr-tag-label) > svg { aspect-ratio: 1 / 1; stroke: currentColor; fill: none; height: 1em; flex: none; }
  abafr-tag > :not(.abafr-tag-label):has(> svg:only-child) > svg {
    height: 1em;
    stroke-width: 3px;
    stroke: var(--tag-color-soft)
  }

abafr-tag:not(:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label))) > :not(.abafr-tag-label) {
  background-color: var(--tag-color-soft);
  border-color: var(--tag-color-border);
  color: var(--tag-text-color);
  border-radius: var(--tag-radius);
}

abafr-tag:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) { gap: 0; }
abafr-tag:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :not(.abafr-tag-label) { border-radius: 0; }
abafr-tag:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :nth-child(1 of :not(.abafr-tag-label)) {
  background-color: var(--tag-solid-color);
  border-color: var(--tag-solid-color);
  color: var(--tag-solid-contrast);
  border-top-left-radius: var(--tag-radius);
  border-bottom-left-radius: var(--tag-radius);
}
abafr-tag:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :nth-child(n + 2 of :not(.abafr-tag-label)) {
  background-color: var(--tag-color-soft);
  border-color: var(--tag-color-border);
  color: var(--tag-text-color);
  border-left-width: 0;
}
abafr-tag:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :nth-last-child(1 of :not(.abafr-tag-label)) {
  border-top-right-radius: var(--tag-radius);
  border-bottom-right-radius: var(--tag-radius);
}

abafr-tag.action:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :not(.abafr-tag-label):not(:nth-last-child(1 of :not(.abafr-tag-label))) {
  background-color: var(--tag-color-soft);
  border-color: var(--tag-color-border);
  color: var(--tag-text-color);
  border-right-width: 0;
  border-left-width: 1px;
}
abafr-tag.action:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :nth-last-child(1 of :not(.abafr-tag-label)) {
  background-color: var(--tag-solid-color);
  border-color: var(--tag-solid-color);
  color: var(--tag-solid-contrast);
  border-left-width: 0;
}

abafr-tag.pill { --tag-radius: var(--tag-radius-pill); }
abafr-tag.pill > :nth-child(1 of :not(.abafr-tag-label)) { padding-inline-start: .5em; }
abafr-tag.pill > :nth-last-child(1 of :not(.abafr-tag-label)) { padding-inline-end: .5em; }
abafr-tag.sharp { --tag-radius: var(--tag-radius-sharp); }

abafr-tag.outline:not(:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label))) > :not(.abafr-tag-label) {
  background-color: transparent;
  border-color: var(--tag-color);
  color: var(--tag-text-color);
}
abafr-tag.outline:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :not(.abafr-tag-label) {
  background-color: transparent;
  border-color: var(--tag-color);
  color: var(--tag-text-color);
  border-left-width: 1px;
}
abafr-tag.outline.white > :not(.abafr-tag-label) { background-color: transparent; border-color: white; color: white; }
abafr-tag.outline.white:has(> :not(.abafr-tag-label) + :not(.abafr-tag-label)) > :nth-child(n + 2 of :not(.abafr-tag-label)) { border-left-width: 0; }
abafr-tag.xsmall { font-size: .6em; }
abafr-tag.small { font-size: .7em; }
abafr-tag.mid { font-size: .8em; }
abafr-tag.borderless > :not(.abafr-tag-label) { border-width: 0 !important; }
abafr-tag.upper > :not(.abafr-tag-label) { text-transform: uppercase; }