/* Values from the live site: .tt-label (0.8rem bold), Label "Platform
   Gradient", .tt-batch (outline badge, 0.6rem).

   Gradients: Product is the platform gradient (dark backgrounds #6085FF
   #75ACFF #A46BFF, light backgrounds #033EFF #0060F0 #5900E8). Green and Blue
   are derived the same way: three stops, a lighter set for dark backgrounds
   and a deeper one for light backgrounds. The set is picked with the --tt-dark
   space toggle (see Button.module.css): --_d-g only exists when dark. */
.cjQoqVs3VqSYANFvJFBU {
  --_g: none;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* As wide as its text in any parent (grid, flex, block). */
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  /* Variable font: 600 reads as bold enough and matches the headings. */
  font-weight: 600;
  /* Same stylistic sets as the site's headings and buttons. */
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
}

.c02wqn5j0_pCupzmPUjp {
  display: block;
}

/* ---------- Size and case ----------
   Text and badges step differently: text labels grow more towards the top,
   badges stay compact.
   Text:  X-Small 0.7, Small 0.8 (.tt-label), Medium 0.9, Large 1.1, X-Large 1.3rem.
   Badge: X-Small 0.5, Small 0.55, Medium 0.6 (.tt-batch), Large 0.7
          (.tt-batch.large), X-Large 0.8rem. */

.cjQoqVs3VqSYANFvJFBU[data-size="x-small"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="small"] { font-size: 0.8rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="large"] { font-size: 1.1rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="x-large"] { font-size: 1.3rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Blend ----------
   Lets the label mix with what's behind it, e.g. a shader: Plus Lighter
   glows on dark, Multiply sinks into light. Auto picks by the --tt-dark
   toggle, like the Quote. */
.cjQoqVs3VqSYANFvJFBU[data-blend="auto"] {
  --_d-blend: var(--tt-dark) plus-lighter;

  mix-blend-mode: var(--_d-blend, multiply);
}

.cjQoqVs3VqSYANFvJFBU[data-blend="plus-lighter"] { mix-blend-mode: plus-lighter; }
.cjQoqVs3VqSYANFvJFBU[data-blend="multiply"] { mix-blend-mode: multiply; }

/* ---------- Colors ---------- */

/* Muted: the text color around it, toned down like the Heading Group subline. */
.cjQoqVs3VqSYANFvJFBU[data-muted] {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-color="product"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #6085ff 10%, #75acff 38%, #a46bff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #033eff 10%, #0060f0 38%, #5900e8 90%));
}

/* Stays within greens: a fresh green, a lighter mint, a cooler green. */
.cjQoqVs3VqSYANFvJFBU[data-color="green"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #3ddc84 10%, #86efac 45%, #2bc48a 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #00873e 10%, #12a150 45%, #047857 90%));
}

.cjQoqVs3VqSYANFvJFBU[data-color="blue"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #4c9bff 10%, #7fd0ff 45%, #6b7cff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #0055e5 10%, #0089d1 45%, #3442e0 90%));
}

/* Stays within the brand purples (--tt-color-brand #6f00ff, brand-soft #8b33ff). */
.cjQoqVs3VqSYANFvJFBU[data-color="purple"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #a46bff 10%, #c39bff 45%, #8b33ff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #5900e8 10%, #8b33ff 45%, #6f00ff 90%));
}

/* Text in color: the gradient fills the letters. */
.cjQoqVs3VqSYANFvJFBU[data-color] [data-part="text"] {
  background-image: var(--_g);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Badges ---------- */

/* Padding in em, so every size keeps the same proportions. The text is
   nudged down by --_shift (less padding below than above) because the font's
   line box sits a little high; capitals have no descenders and need a bit
   more. The total height stays the same either way. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"],
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"] {
  --_shift: 0.04em;

  padding: calc(0.3em + var(--_shift)) 0.55em calc(0.3em - var(--_shift));
  border-radius: 0.6em;
  font-size: 0.6rem;
  line-height: 1.1;
  font-weight: 600;
}

.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-small"] { font-size: 0.5rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="small"] { font-size: 0.55rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="large"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-large"] { font-size: 0.8rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase]:is([data-style="badge"], [data-style="badge-filled"]) {
  --_shift: 0.06em;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge"]:not([data-color]) {
  border: 1px solid color-mix(in srgb, currentColor 80%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"]:not([data-color]) {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-muted]:is([data-style="badge"], [data-style="badge-filled"]) {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

/* Colored badge: a 1px gradient border, drawn on a layer whose middle is
   cut out with a mask, so the gradient can also run through the border. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"][data-color]::before,
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background-image: var(--_g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Filled: a light tint of the gradient behind the text. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--_g);
  opacity: 0.14;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  opacity: 0.5;
}

/* ---------- Animated ----------
   The gradient is three times as wide as the label and slides back and
   forth, in the text and the border alike. */

.cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
.cjQoqVs3VqSYANFvJFBU[data-animated]::before,
.cjQoqVs3VqSYANFvJFBU[data-animated]::after {
  background-size: 300% 100%;
  animation: Tl0mQjlzMCz5aiuOUZw4 4s ease-in-out infinite alternate;
}

@keyframes Tl0mQjlzMCz5aiuOUZw4 {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
  .cjQoqVs3VqSYANFvJFBU[data-animated]::before,
  .cjQoqVs3VqSYANFvJFBU[data-animated]::after {
    animation: none;
  }
}