.specto-product-badges {
  --specto-badge-gap: var(--su-space-unit-s, 4px);
  --specto-badge-radius: var(--specto-ui-shape-radius-context, var(--su-radius-m, 8px));
  --specto-badge-pad-inline: var(--su-space-unit-m, 8px);
  --specto-badge-pad-block: var(--su-space-unit-s, 4px);
  --specto-badge-font-size: var(--su-font-size-label-s, 12px);
  --specto-badge-line-height: var(--su-line-height-label-s, 1.33333);
  --specto-badge-icon-size: var(--su-size-unit-3xs, 16px);
  --specto-badge-dot-size: var(--su-size-unit-4xs, 8px);
  --specto-badge-min-height: var(--su-size-unit-s, 32px);
  --specto-badge-icon-gap: var(--su-space-unit-xs, 2px);
  --specto-badge-shadow-s: var(
    --specto-ui-elevation-s,
    0 2px 6px 0 rgb(0 0 0 / 8%),
    0 1px 2px 0 rgb(0 0 0 / 6%)
  );
  --specto-badge-shadow-m: var(--specto-badge-shadow-s);
  --specto-badge-shadow: none;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--specto-badge-gap);
}

.specto-badge-element {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.specto-product-badges-element {
  display: block;
  width: 100%;
  min-width: 0;
}

.specto-product-badges-element > .specto-product-badges {
  width: 100%;
}

.specto-product-badges--nowrap {
  flex-wrap: nowrap;
}

.specto-product-badges--align-start {
  justify-content: flex-start;
}

.specto-product-badges--align-center {
  justify-content: center;
}

.specto-product-badges--align-end {
  justify-content: flex-end;
}

.specto-badge {
  --specto-badge-gap: var(--su-space-unit-s, 4px);
  --specto-badge-radius: var(--specto-ui-shape-radius-context, var(--su-radius-m, 8px));
  --specto-badge-pad-inline: var(--su-space-unit-m, 8px);
  --specto-badge-pad-block: var(--su-space-unit-s, 4px);
  --specto-badge-font-size: var(--su-font-size-label-s, 12px);
  --specto-badge-icon-size: var(--su-size-unit-3xs, 16px);
  --specto-badge-dot-size: var(--su-size-unit-4xs, 8px);
  --specto-badge-min-height: var(--su-size-unit-s, 32px);
  --specto-badge-icon-gap: var(--su-space-unit-xs, 2px);
  --specto-badge-shadow-s:
    0 2px 6px 0 var(--sc-eff-reg-sec-def, rgb(0 0 0 / 8%)),
    0 1px 2px 0 var(--sc-eff-reg-pri-def, rgb(0 0 0 / 6%));
  --specto-badge-shadow-m: var(--specto-badge-shadow-s);
  --specto-badge-shadow: var(--specto-badge-shadow-s);
  --specto-badge-bg: transparent;
  --specto-badge-fg: currentColor;
  --specto-badge-border-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--specto-badge-icon-gap);
  min-width: 0;
  min-height: var(--specto-badge-min-height);
  padding: var(--specto-badge-pad-block) var(--specto-badge-pad-inline);
  border: 0;
  border-radius: var(--specto-badge-radius);
  box-sizing: border-box;
  background: var(--specto-badge-bg);
  color: var(--specto-badge-fg);
  box-shadow: var(--specto-badge-shadow);
  font-family: var(--su-font-family-label, inherit);
  font-size: var(--specto-badge-font-size);
  font-weight: var(--su-font-weight-bold, 500);
  line-height: var(--specto-badge-line-height);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.specto-badge__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.specto-badge__icon {
  flex: 0 0 auto;
}

.specto-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--specto-badge-icon-size);
  height: var(--specto-badge-icon-size);
}

.specto-badge__icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  font-size: var(--specto-badge-icon-size);
  line-height: 1;
}

.specto-badge__icon-svg::before {
  display: block;
  line-height: 1;
}

.specto-badge--xs {
  padding: 0;
  width: var(--specto-badge-dot-size);
  min-width: var(--specto-badge-dot-size);
  min-height: var(--specto-badge-dot-size);
}

.specto-badge--s {
  --specto-badge-pad-inline: var(--su-space-unit-s, 4px);
  --specto-badge-pad-block: var(--su-space-unit-xs, 2px);
  --specto-badge-font-size: var(--su-font-size-label-s, 12px);
  --specto-badge-line-height: var(--su-line-height-label-s, 1.33333);
  --specto-badge-min-height: var(--su-size-unit-3xs, 16px);
  --specto-badge-shadow: none;
}

.specto-badge--m {
  --specto-badge-pad-inline: var(--su-space-unit-m, 8px);
  --specto-badge-pad-block: var(--su-space-unit-s, 4px);
  --specto-badge-font-size: var(--su-font-size-label-m, 14px);
  --specto-badge-line-height: var(--su-line-height-label-m, 1.42857);
  --specto-badge-min-height: var(--su-size-unit-s, 32px);
  --specto-badge-shadow: none;
  min-width: var(--su-size-unit-s, 32px);
  height: var(--su-size-unit-s, 32px);
  max-width: var(--su-size-unit-4xl, 160px);
}

.specto-badge--icon {
  --specto-badge-icon-gap: 0;
  --specto-badge-pad-inline: var(--su-space-unit-m, 8px);
  --specto-badge-pad-block: var(--su-space-unit-m, 8px);
  --specto-badge-min-height: var(--su-size-unit-s, 32px);
  --specto-badge-shadow: none;
}

.specto-badge[data-specto-badge-type='text'][data-specto-badge-size='s'] {
  --specto-badge-radius: var(--su-radius-full, 99999px);
  --specto-badge-pad-block: 0;
  height: var(--su-size-unit-3xs, 16px);
  min-width: var(--su-size-unit-3xs, 16px);
  max-width: var(--su-size-unit-xl, 56px);
}

.specto-badge[data-specto-badge-type='text'][data-specto-badge-size='m'] {
  --specto-badge-pad-block: 0;
}

.specto-badge[data-specto-badge-size='m'] {
  --specto-badge-radius: var(--specto-ui-shape-radius-unit-s, var(--su-radius-s, 0px));
}

.specto-badge--bubble.specto-badge--xs {
  --specto-badge-pad-inline: 0;
  --specto-badge-pad-block: 0;
}

.specto-badge[data-specto-badge-color-group='primary'] {
  --specto-badge-accent: var(--sc-fil-reg-pri-def, #9625ff);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-pri-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-color-group='neutral'] {
  --specto-badge-accent: var(--sc-fil-reg-neu-def, #6d778f);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-neu-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-color-group='danger'] {
  --specto-badge-accent: var(--sc-fil-reg-dan-def, #d70071);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-dan-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-color-group='orange'] {
  --specto-badge-accent: var(--sc-fil-reg-war-def, #ea9549);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-war-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-color-group='green'] {
  --specto-badge-accent: var(--sc-fil-reg-suc-def, #3c8a51);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-suc-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-color-group='blue'] {
  --specto-badge-accent: var(--sc-fil-reg-inf-def, #465fff);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-inf-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-color-group='purple'] {
  --specto-badge-accent: var(--sc-fil-reg-sec-def, #9625ff);
  --specto-badge-bg: var(--specto-badge-accent);
  --specto-badge-fg: var(--sc-tex-lab-on-sec-def, #ffffff);
  --specto-badge-border-color: var(--specto-badge-accent);
}

.specto-badge[data-specto-badge-appearance='light'] {
  --specto-badge-bg: var(--sc-fil-reg-pla-def, #ffffff);
  --specto-badge-fg: var(--sc-tex-lab-on-pla-def, #000000);
  --specto-badge-border-color: transparent;
  --specto-badge-shadow: none;
}

.specto-badge[data-specto-badge-appearance='light'][data-specto-badge-size='m'] {
  --specto-badge-shadow: 0 1px 2px 0 rgb(0 0 0 / 20%), 0 1px 4px 0 rgb(0 0 0 / 12%);
}

.specto-badge[data-specto-badge-appearance='dark'] {
  --specto-badge-bg: var(--sc-fil-reg-con-def, #000000);
  --specto-badge-fg: var(--sc-tex-lab-on-pri-def, #ffffff);
  --specto-badge-border-color: var(--sc-fil-reg-con-def, #000000);
}

.specto-badge[data-specto-badge-preset='notification'][data-specto-badge-appearance='colorful'] {
  --specto-badge-bg: var(--sc-fil-sub-pri-def, #f3eeff);
  --specto-badge-fg: var(--sc-tex-lab-pri-def, #9625ff);
  --specto-badge-border-color: var(--sc-fil-sub-pri-def, #f3eeff);
}

.specto-badge[data-specto-badge-type='icon'] {
  width: var(--specto-badge-min-height);
  min-width: var(--specto-badge-min-height);
  min-height: var(--specto-badge-min-height);
  padding: 0;
}

.specto-badge[data-specto-badge-type='icon'][data-specto-badge-size='s'] {
  width: var(--su-size-unit-3xs, 16px);
  min-width: var(--su-size-unit-3xs, 16px);
  min-height: var(--su-size-unit-3xs, 16px);
  --specto-badge-radius: 0;
  border-radius: 0;
  --specto-badge-bg: transparent;
  --specto-badge-border-color: transparent;
  --specto-badge-shadow: none;
  overflow: visible;
}

.specto-badge[data-specto-badge-type='icon'][data-specto-badge-size='s'][data-specto-badge-appearance='colorful'] {
  --specto-badge-fg: var(--specto-badge-accent, currentColor);
}

.specto-badge[data-specto-badge-type='icon'][data-specto-badge-size='s'][data-specto-badge-appearance='light'],
.specto-badge[data-specto-badge-type='icon'][data-specto-badge-size='s'][data-specto-badge-appearance='dark'] {
  --specto-badge-fg: var(--sc-ico-lab-con-def, #000000);
}

.specto-badge[data-specto-badge-size='xs'] {
  --specto-badge-min-height: var(--specto-badge-dot-size);
}

.specto-badge[data-specto-badge-type='bubble'][data-specto-badge-size='xs'] {
  display: inline-block;
  padding: 0;
  width: var(--specto-badge-dot-size);
  height: var(--specto-badge-dot-size);
  min-width: var(--specto-badge-dot-size);
  min-height: var(--specto-badge-dot-size);
  background: var(--specto-badge-bg);
  border: 0;
  box-shadow: none;
  border-radius: 50%;
}