/* DEV: Vendored verbatim copy of @gomining/ds-ui (tag/styles.css),
   pinned to the installed v2.1.x. Served statically at /docs/ds/tag.css
   for the partner docs page. Do not edit by hand — re-copy from node_modules. */
/* =====================================================================
   GmTag / GmVipTag / GmIconTag — global stylesheet
   Selectors: gm-tag, gm-vip-tag, gm-icon-tag
   ===================================================================== */

/* ===== GmTag (Small / Big / Circle) ===================================== */

gm-tag {
  /* Sizing — default md */
  --_gm-tag-height: var(--gm-tag-md-height);
  --_gm-tag-radius: var(--gm-tag-md-radius);
  --_gm-tag-padding-x: var(--gm-tag-md-padding-x);
  --_gm-tag-padding-y: var(--gm-tag-md-padding-y);
  --_gm-tag-gap: var(--gm-tag-md-gap);
  --_gm-tag-font-size: var(--gm-tag-md-font-size);
  --_gm-tag-line-height: var(--gm-tag-md-line-height);

  /* Surface — default tone=grey, textTone=neutral.
     Используем --gm-text-base-primary напрямую (без --gm-tag-text-neutral) —
     CSS var() цепочки `--A: var(--B)` early-resolve на :root и не реагируют
     на тематические оверрайды через [data-theme] / html.light. */
  --_gm-tag-bg: var(--gm-tag-bg-grey);
  --_gm-tag-color: var(--gm-text-base-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gm-tag-gap);
  height: var(--_gm-tag-height);
  padding: var(--_gm-tag-padding-y) var(--_gm-tag-padding-x);
  border-radius: var(--_gm-tag-radius);
  background: var(--_gm-tag-bg);
  color: var(--_gm-tag-color);
  font-family: var(--gm-font-family-ui);
  font-size: var(--_gm-tag-font-size);
  line-height: var(--_gm-tag-line-height);
  font-weight: var(--gm-tag-font-weight);
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--gm-transition-base),
    color var(--gm-transition-base);
}

gm-tag .gm-tag__label {
  display: inline-flex;
  align-items: center;
}

/* ===== Sizes ===== */

gm-tag[size='sm'] {
  --_gm-tag-height: var(--gm-tag-sm-height);
  --_gm-tag-radius: var(--gm-tag-sm-radius);
  --_gm-tag-padding-x: var(--gm-tag-sm-padding-x);
  --_gm-tag-padding-y: var(--gm-tag-sm-padding-y);
  --_gm-tag-gap: var(--gm-tag-sm-gap);
  --_gm-tag-font-size: var(--gm-tag-sm-font-size);
  --_gm-tag-line-height: var(--gm-tag-sm-line-height);
}

/* ===== Shapes ===== */

gm-tag[shape='pill'] {
  --_gm-tag-radius: var(--gm-tag-pill-radius);
}

/* ===== Tones — background ===== */

gm-tag[tone='purple']  { --_gm-tag-bg: var(--gm-tag-bg-purple); }
gm-tag[tone='red']     { --_gm-tag-bg: var(--gm-tag-bg-red); }
gm-tag[tone='green']   { --_gm-tag-bg: var(--gm-tag-bg-green); }
gm-tag[tone='yellow']  { --_gm-tag-bg: var(--gm-tag-bg-yellow); }
gm-tag[tone='pink']    { --_gm-tag-bg: var(--gm-tag-bg-pink); }
gm-tag[tone='violet']  { --_gm-tag-bg: var(--gm-tag-bg-violet); }
gm-tag[tone='blue']    { --_gm-tag-bg: var(--gm-tag-bg-blue); }
gm-tag[tone='grey']    { --_gm-tag-bg: var(--gm-tag-bg-grey); }

/* ===== Text tone — `color` overrides foreground to brand color ===== */

gm-tag[text-tone='color'][tone='purple']  { --_gm-tag-color: var(--gm-tag-text-purple); }
gm-tag[text-tone='color'][tone='red']     { --_gm-tag-color: var(--gm-tag-text-red); }
gm-tag[text-tone='color'][tone='green']   { --_gm-tag-color: var(--gm-tag-text-green); }
gm-tag[text-tone='color'][tone='yellow']  { --_gm-tag-color: var(--gm-tag-text-yellow); }
gm-tag[text-tone='color'][tone='pink']    { --_gm-tag-color: var(--gm-tag-text-pink); }
gm-tag[text-tone='color'][tone='violet']  { --_gm-tag-color: var(--gm-tag-text-violet); }
gm-tag[text-tone='color'][tone='blue']    { --_gm-tag-color: var(--gm-tag-text-blue); }
gm-tag[text-tone='color'][tone='grey']    { --_gm-tag-color: var(--gm-tag-text-grey); }

/* ===== GmVipTag ========================================================= */

gm-vip-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-tag-vip-gap);
  height: var(--gm-tag-vip-height);
  padding: var(--gm-tag-vip-padding-y) var(--gm-tag-vip-padding-x);
  padding-inline-end: calc(var(--gm-tag-vip-padding-x) + var(--gm-tag-vip-padding-end-extra));
  border-radius: var(--gm-tag-vip-radius);
  background: var(--_gm-vip-tag-bg, var(--gm-tag-vip-bg-silver));
  color: var(--gm-text-base-primary);
  font-family: var(--gm-font-family-ui);
  font-size: var(--gm-tag-vip-font-size);
  line-height: var(--gm-tag-vip-line-height);
  font-weight: var(--gm-tag-font-weight);
  white-space: nowrap;
  vertical-align: middle;
}

gm-vip-tag .gm-vip-tag__badge {
  display: block;
  width: var(--gm-tag-vip-badge-size);
  height: var(--gm-tag-vip-badge-size);
  object-fit: contain;
  flex-shrink: 0;
}

/* Inline SVG badge (gradient tiers) — fill the .gm-vip-tag__badge box. */
gm-vip-tag .gm-vip-tag__badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

gm-vip-tag[tier='bronze']        { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-bronze); }
gm-vip-tag[tier='silver']        { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-silver); }
gm-vip-tag[tier='gold']          { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-gold); }
gm-vip-tag[tier='platinum']      { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-platinum); }
gm-vip-tag[tier='diamond']       { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-diamond); }
gm-vip-tag[tier='legend']        { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-legend); }
gm-vip-tag[tier='elite']         { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-elite); }
gm-vip-tag[tier='avatar']        { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-avatar); }
gm-vip-tag[tier='platinum-plus'] { --_gm-vip-tag-bg: var(--gm-tag-vip-bg-platinum-plus); }

/* ===== GmIconTag ======================================================== */

gm-icon-tag {
  --_gm-icon-tag-bg: var(--gm-tag-bg-grey);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gm-tag-icon-size);
  height: var(--gm-tag-icon-size);
  padding: var(--gm-tag-icon-padding);
  border-radius: var(--gm-tag-icon-radius);
  background: var(--_gm-icon-tag-bg);
  color: var(--gm-tag-icon-glyph-color);
  box-sizing: border-box;
}

gm-icon-tag[tone='grey']   { --_gm-icon-tag-bg: var(--gm-tag-bg-grey); }
gm-icon-tag[tone='yellow'] { --_gm-icon-tag-bg: var(--gm-tag-bg-yellow); }
gm-icon-tag[tone='red']    { --_gm-icon-tag-bg: var(--gm-tag-bg-red); }
gm-icon-tag[tone='green']  { --_gm-icon-tag-bg: var(--gm-tag-bg-green); }

/* Inner gm-icon рендерится через currentColor → подхватывает glyph-color */
gm-icon-tag gm-icon {
  display: inline-flex;
  width: var(--gm-tag-icon-glyph-size);
  height: var(--gm-tag-icon-glyph-size);
}