/* Button / Icon Button — Figma 710:1083 (Type × Color × Size).
 * Figma Type is Fill / Tonal / Outline / Category / Text and their four Icon forms.
 * Tonal consumes the existing --color-button-subtle-* token role; subtle class is a compatibility alias.
 * Geometry binds --responsive-button-* and --corner-*; color binds --color-button-*.
 * Interaction states follow the Figma Button Table (Default / Hover / Pressed / Disabled):
 *   Hover = bg-hover / fg-hover, Pressed (:active) = bg-pressed / fg-pressed,
 *   Disabled = the same button at 40% opacity (Figma Button Table, every type and color).
 * Focus is not drawn in Figma; :focus-visible adds the DS focus outline for WCAG 2.2. */
.epic-button {
  --epic-button-height: var(--responsive-button-height-m);
  --epic-button-padding-x: var(--responsive-button-padding-x-m);
  --epic-button-gap: var(--responsive-button-gap-m);
  --epic-button-icon: var(--responsive-button-icon-m);
  --epic-button-icon-only: var(--responsive-button-icon-only-m);
  --epic-button-font-size: var(--responsive-button-label-font-size-m);
  --epic-button-line-height: var(--responsive-button-label-line-height-m);
  --epic-button-radius: var(--corner-m);
  /* Bare .epic-button = Fill · Brand · M. Always pair a type class with a color class. */
  --epic-button-bg: var(--color-button-fill-brand-bg);
  --epic-button-bg-hover: var(--color-button-fill-brand-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-brand-bg-pressed);
  --epic-button-fg: var(--color-button-fill-brand-fg);
  --epic-button-stroke: transparent;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--epic-button-gap);
  block-size: var(--epic-button-height);
  min-inline-size: 0;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--epic-button-padding-x);
  border: var(--stroke-width-default) solid var(--epic-button-stroke);
  border-radius: var(--epic-button-radius);
  color: var(--epic-button-fg);
  background: var(--epic-button-bg);
  font-family: var(--font-family-base);
  font-size: var(--epic-button-font-size);
  font-weight: 600;
  line-height: var(--epic-button-line-height);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.epic-button:hover {
  color: var(--epic-button-fg-hover, var(--epic-button-fg));
  background: var(--epic-button-bg-hover, var(--epic-button-bg));
}

.epic-button:active {
  color: var(--epic-button-fg-pressed, var(--epic-button-fg-hover, var(--epic-button-fg)));
  background: var(--epic-button-bg-pressed, var(--epic-button-bg-hover, var(--epic-button-bg)));
}

.epic-button:focus-visible {
  outline: 2px solid var(--color-brand-role-input-stroke-focus);
  outline-offset: 2px;
}

.epic-button:disabled,
.epic-button[aria-disabled="true"] {
  /* Figma Button Table: Disabled = same colors at 40% opacity (no separate tokens). */
  color: var(--epic-button-fg);
  background: var(--epic-button-bg);
  opacity: 0.4;
  cursor: not-allowed;
}

.epic-button__icon {
  display: inline-grid;
  flex: 0 0 auto;
  inline-size: var(--epic-button-icon);
  block-size: var(--epic-button-icon);
  /* Font glyphs use the same Figma icon geometry as SVGs, independent of label size. */
  font-size: var(--epic-button-icon);
  place-items: center;
}

.epic-button__icon > svg {
  inline-size: 100%;
  block-size: 100%;
}

.epic-button__label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sizes — radius steps with size (Figma: L corner-l, M corner-m, S corner-s, XS corner-xs). */
.epic-button--l {
  --epic-button-height: var(--responsive-button-height-l);
  --epic-button-padding-x: var(--responsive-button-padding-x-l);
  --epic-button-gap: var(--responsive-button-gap-l);
  --epic-button-icon: var(--responsive-button-icon-l);
  --epic-button-icon-only: var(--responsive-button-icon-only-l);
  --epic-button-font-size: var(--responsive-button-label-font-size-l);
  --epic-button-line-height: var(--responsive-button-label-line-height-l);
  --epic-button-radius: var(--corner-l);
}

.epic-button--m {
  --epic-button-height: var(--responsive-button-height-m);
  --epic-button-padding-x: var(--responsive-button-padding-x-m);
  --epic-button-gap: var(--responsive-button-gap-m);
  --epic-button-icon: var(--responsive-button-icon-m);
  --epic-button-icon-only: var(--responsive-button-icon-only-m);
  --epic-button-font-size: var(--responsive-button-label-font-size-m);
  --epic-button-line-height: var(--responsive-button-label-line-height-m);
  --epic-button-radius: var(--corner-m);
}

.epic-button--s {
  --epic-button-height: var(--responsive-button-height-s);
  --epic-button-padding-x: var(--responsive-button-padding-x-s);
  --epic-button-gap: var(--responsive-button-gap-s);
  --epic-button-icon: var(--responsive-button-icon-s);
  --epic-button-icon-only: var(--responsive-button-icon-only-s);
  --epic-button-font-size: var(--responsive-button-label-font-size-s);
  --epic-button-line-height: var(--responsive-button-label-line-height-s);
  --epic-button-radius: var(--corner-s);
}

.epic-button--xs {
  --epic-button-height: var(--responsive-button-height-xs);
  --epic-button-padding-x: var(--responsive-button-padding-x-xs);
  --epic-button-gap: var(--responsive-button-gap-xs);
  --epic-button-icon: var(--responsive-button-icon-xs);
  --epic-button-icon-only: var(--responsive-button-icon-only-xs);
  --epic-button-font-size: var(--responsive-button-label-font-size-xs);
  --epic-button-line-height: var(--responsive-button-label-line-height-xs);
  --epic-button-radius: var(--corner-xs);
}

/* Icon Button — square (width = height token), icon uses the icon-only token. */
:is(.epic-button--icon, .epic-button--icon-fill, .epic-button--icon-tonal, .epic-button--icon-outline, .epic-button--icon-category) {
  inline-size: var(--epic-button-height);
  padding-inline: 0;
}

:is(.epic-button--icon, .epic-button--icon-fill, .epic-button--icon-tonal, .epic-button--icon-outline, .epic-button--icon-category) .epic-button__icon {
  inline-size: var(--epic-button-icon-only);
  block-size: var(--epic-button-icon-only);
  font-size: var(--epic-button-icon-only);
}

/* Text has no horizontal padding in Figma. */
.epic-button--text:not(.epic-button--icon) {
  padding-inline: 0;
}


/* Type × Color — every reference below exists in dev-tokens/css/tokens.css. */
:is(.epic-button--fill, .epic-button--icon-fill).epic-button--brand {
  --epic-button-bg: var(--color-button-fill-brand-bg);
  --epic-button-bg-hover: var(--color-button-fill-brand-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-brand-bg-pressed);
  --epic-button-fg: var(--color-button-fill-brand-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--black {
  --epic-button-bg: var(--color-button-fill-black-bg);
  --epic-button-bg-hover: var(--color-button-fill-black-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-black-bg-pressed);
  --epic-button-fg: var(--color-button-fill-black-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--gray {
  --epic-button-bg: var(--color-button-fill-gray-bg);
  --epic-button-bg-hover: var(--color-button-fill-gray-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-gray-bg-pressed);
  --epic-button-fg: var(--color-button-fill-gray-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--white {
  --epic-button-bg: var(--color-button-fill-white-bg);
  --epic-button-bg-hover: var(--color-button-fill-white-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-white-bg-pressed);
  --epic-button-fg: var(--color-button-fill-white-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--rose {
  --epic-button-bg: var(--color-button-fill-rose-bg);
  --epic-button-bg-hover: var(--color-button-fill-rose-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-rose-bg-pressed);
  --epic-button-fg: var(--color-button-fill-rose-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--amber {
  --epic-button-bg: var(--color-button-fill-amber-bg);
  --epic-button-bg-hover: var(--color-button-fill-amber-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-amber-bg-pressed);
  --epic-button-fg: var(--color-button-fill-amber-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--emerald {
  --epic-button-bg: var(--color-button-fill-emerald-bg);
  --epic-button-bg-hover: var(--color-button-fill-emerald-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-emerald-bg-pressed);
  --epic-button-fg: var(--color-button-fill-emerald-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--sky {
  --epic-button-bg: var(--color-button-fill-sky-bg);
  --epic-button-bg-hover: var(--color-button-fill-sky-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-sky-bg-pressed);
  --epic-button-fg: var(--color-button-fill-sky-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--indigo {
  --epic-button-bg: var(--color-button-fill-indigo-bg);
  --epic-button-bg-hover: var(--color-button-fill-indigo-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-indigo-bg-pressed);
  --epic-button-fg: var(--color-button-fill-indigo-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--plum {
  --epic-button-bg: var(--color-button-fill-plum-bg);
  --epic-button-bg-hover: var(--color-button-fill-plum-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-plum-bg-pressed);
  --epic-button-fg: var(--color-button-fill-plum-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--danger {
  --epic-button-bg: var(--color-button-fill-danger-bg);
  --epic-button-bg-hover: var(--color-button-fill-danger-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-danger-bg-pressed);
  --epic-button-fg: var(--color-button-fill-danger-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--warning {
  --epic-button-bg: var(--color-button-fill-warning-bg);
  --epic-button-bg-hover: var(--color-button-fill-warning-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-warning-bg-pressed);
  --epic-button-fg: var(--color-button-fill-warning-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--success {
  --epic-button-bg: var(--color-button-fill-success-bg);
  --epic-button-bg-hover: var(--color-button-fill-success-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-success-bg-pressed);
  --epic-button-fg: var(--color-button-fill-success-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--fill, .epic-button--icon-fill).epic-button--info {
  --epic-button-bg: var(--color-button-fill-info-bg);
  --epic-button-bg-hover: var(--color-button-fill-info-bg-hover);
  --epic-button-bg-pressed: var(--color-button-fill-info-bg-pressed);
  --epic-button-fg: var(--color-button-fill-info-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--brand {
  --epic-button-bg: var(--color-button-subtle-brand-bg);
  --epic-button-bg-hover: var(--color-button-subtle-brand-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-brand-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-brand-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--black {
  --epic-button-bg: var(--color-button-subtle-black-bg);
  --epic-button-bg-hover: var(--color-button-subtle-black-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-black-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-black-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--gray {
  --epic-button-bg: var(--color-button-subtle-gray-bg);
  --epic-button-bg-hover: var(--color-button-subtle-gray-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-gray-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-gray-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--white {
  --epic-button-bg: var(--color-button-subtle-white-bg);
  --epic-button-bg-hover: var(--color-button-subtle-white-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-white-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-white-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--rose {
  --epic-button-bg: var(--color-button-subtle-rose-bg);
  --epic-button-bg-hover: var(--color-button-subtle-rose-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-rose-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-rose-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--amber {
  --epic-button-bg: var(--color-button-subtle-amber-bg);
  --epic-button-bg-hover: var(--color-button-subtle-amber-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-amber-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-amber-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--emerald {
  --epic-button-bg: var(--color-button-subtle-emerald-bg);
  --epic-button-bg-hover: var(--color-button-subtle-emerald-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-emerald-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-emerald-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--sky {
  --epic-button-bg: var(--color-button-subtle-sky-bg);
  --epic-button-bg-hover: var(--color-button-subtle-sky-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-sky-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-sky-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--indigo {
  --epic-button-bg: var(--color-button-subtle-indigo-bg);
  --epic-button-bg-hover: var(--color-button-subtle-indigo-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-indigo-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-indigo-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--plum {
  --epic-button-bg: var(--color-button-subtle-plum-bg);
  --epic-button-bg-hover: var(--color-button-subtle-plum-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-plum-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-plum-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--danger {
  --epic-button-bg: var(--color-button-subtle-danger-bg);
  --epic-button-bg-hover: var(--color-button-subtle-danger-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-danger-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-danger-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--warning {
  --epic-button-bg: var(--color-button-subtle-warning-bg);
  --epic-button-bg-hover: var(--color-button-subtle-warning-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-warning-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-warning-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--success {
  --epic-button-bg: var(--color-button-subtle-success-bg);
  --epic-button-bg-hover: var(--color-button-subtle-success-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-success-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-success-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--tonal, .epic-button--subtle, .epic-button--icon-tonal).epic-button--info {
  --epic-button-bg: var(--color-button-subtle-info-bg);
  --epic-button-bg-hover: var(--color-button-subtle-info-bg-hover);
  --epic-button-bg-pressed: var(--color-button-subtle-info-bg-pressed);
  --epic-button-fg: var(--color-button-subtle-info-fg);
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--brand {
  --epic-button-bg-hover: var(--color-button-outline-brand-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-brand-bg-pressed);
  --epic-button-fg: var(--color-button-outline-brand-fg);
  --epic-button-stroke: var(--color-button-outline-brand-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--black {
  --epic-button-bg-hover: var(--color-button-outline-black-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-black-bg-pressed);
  --epic-button-fg: var(--color-button-outline-black-fg);
  --epic-button-stroke: var(--color-button-outline-black-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--gray {
  --epic-button-bg-hover: var(--color-button-outline-gray-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-gray-bg-pressed);
  --epic-button-fg: var(--color-button-outline-gray-fg);
  --epic-button-stroke: var(--color-button-outline-gray-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--white {
  --epic-button-bg-hover: var(--color-button-outline-white-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-white-bg-pressed);
  --epic-button-fg: var(--color-button-outline-white-fg);
  --epic-button-stroke: var(--color-button-outline-white-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--rose {
  --epic-button-bg-hover: var(--color-button-outline-rose-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-rose-bg-pressed);
  --epic-button-fg: var(--color-button-outline-rose-fg);
  --epic-button-stroke: var(--color-button-outline-rose-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--amber {
  --epic-button-bg-hover: var(--color-button-outline-amber-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-amber-bg-pressed);
  --epic-button-fg: var(--color-button-outline-amber-fg);
  --epic-button-stroke: var(--color-button-outline-amber-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--emerald {
  --epic-button-bg-hover: var(--color-button-outline-emerald-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-emerald-bg-pressed);
  --epic-button-fg: var(--color-button-outline-emerald-fg);
  --epic-button-stroke: var(--color-button-outline-emerald-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--sky {
  --epic-button-bg-hover: var(--color-button-outline-sky-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-sky-bg-pressed);
  --epic-button-fg: var(--color-button-outline-sky-fg);
  --epic-button-stroke: var(--color-button-outline-sky-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--indigo {
  --epic-button-bg-hover: var(--color-button-outline-indigo-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-indigo-bg-pressed);
  --epic-button-fg: var(--color-button-outline-indigo-fg);
  --epic-button-stroke: var(--color-button-outline-indigo-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--plum {
  --epic-button-bg-hover: var(--color-button-outline-plum-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-plum-bg-pressed);
  --epic-button-fg: var(--color-button-outline-plum-fg);
  --epic-button-stroke: var(--color-button-outline-plum-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--danger {
  --epic-button-bg-hover: var(--color-button-outline-danger-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-danger-bg-pressed);
  --epic-button-fg: var(--color-button-outline-danger-fg);
  --epic-button-stroke: var(--color-button-outline-danger-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--warning {
  --epic-button-bg-hover: var(--color-button-outline-warning-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-warning-bg-pressed);
  --epic-button-fg: var(--color-button-outline-warning-fg);
  --epic-button-stroke: var(--color-button-outline-warning-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--success {
  --epic-button-bg-hover: var(--color-button-outline-success-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-success-bg-pressed);
  --epic-button-fg: var(--color-button-outline-success-fg);
  --epic-button-stroke: var(--color-button-outline-success-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--outline, .epic-button--icon-outline).epic-button--info {
  --epic-button-bg-hover: var(--color-button-outline-info-bg-hover);
  --epic-button-bg-pressed: var(--color-button-outline-info-bg-pressed);
  --epic-button-fg: var(--color-button-outline-info-fg);
  --epic-button-stroke: var(--color-button-outline-info-stroke);
  --epic-button-bg: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--brand {
  --epic-button-bg-hover: var(--color-button-text-brand-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-brand-bg-pressed);
  --epic-button-fg: var(--color-button-text-brand-fg);
  --epic-button-fg-hover: var(--color-button-text-brand-fg-hover);
  --epic-button-fg-pressed: var(--color-button-text-brand-fg-pressed);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
}

.epic-button--text.epic-button--black {
  --epic-button-bg-hover: var(--color-button-text-black-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-black-bg-pressed);
  --epic-button-fg: var(--color-button-text-black-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--gray {
  --epic-button-bg-hover: var(--color-button-text-gray-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-gray-bg-pressed);
  --epic-button-fg: var(--color-button-text-gray-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--white {
  --epic-button-bg-hover: var(--color-button-text-white-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-white-bg-pressed);
  --epic-button-fg: var(--color-button-text-white-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--rose {
  --epic-button-bg-hover: var(--color-button-text-rose-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-rose-bg-pressed);
  --epic-button-fg: var(--color-button-text-rose-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--amber {
  --epic-button-bg-hover: var(--color-button-text-amber-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-amber-bg-pressed);
  --epic-button-fg: var(--color-button-text-amber-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--emerald {
  --epic-button-bg-hover: var(--color-button-text-emerald-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-emerald-bg-pressed);
  --epic-button-fg: var(--color-button-text-emerald-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--sky {
  --epic-button-bg-hover: var(--color-button-text-sky-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-sky-bg-pressed);
  --epic-button-fg: var(--color-button-text-sky-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--indigo {
  --epic-button-bg-hover: var(--color-button-text-indigo-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-indigo-bg-pressed);
  --epic-button-fg: var(--color-button-text-indigo-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--plum {
  --epic-button-bg-hover: var(--color-button-text-plum-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-plum-bg-pressed);
  --epic-button-fg: var(--color-button-text-plum-fg);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

.epic-button--text.epic-button--danger {
  --epic-button-bg-hover: var(--color-button-text-danger-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-danger-bg-pressed);
  --epic-button-fg: var(--color-button-text-danger-fg);
  --epic-button-fg-hover: var(--color-button-text-danger-fg-hover);
  --epic-button-fg-pressed: var(--color-button-text-danger-fg-pressed);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
}

.epic-button--text.epic-button--warning {
  --epic-button-bg-hover: var(--color-button-text-warning-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-warning-bg-pressed);
  --epic-button-fg: var(--color-button-text-warning-fg);
  --epic-button-fg-hover: var(--color-button-text-warning-fg-hover);
  --epic-button-fg-pressed: var(--color-button-text-warning-fg-pressed);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
}

.epic-button--text.epic-button--success {
  --epic-button-bg-hover: var(--color-button-text-success-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-success-bg-pressed);
  --epic-button-fg: var(--color-button-text-success-fg);
  --epic-button-fg-hover: var(--color-button-text-success-fg-hover);
  --epic-button-fg-pressed: var(--color-button-text-success-fg-pressed);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
}

.epic-button--text.epic-button--info {
  --epic-button-bg-hover: var(--color-button-text-info-bg-hover);
  --epic-button-bg-pressed: var(--color-button-text-info-bg-pressed);
  --epic-button-fg: var(--color-button-text-info-fg);
  --epic-button-fg-hover: var(--color-button-text-info-fg-hover);
  --epic-button-fg-pressed: var(--color-button-text-info-fg-pressed);
  --epic-button-bg: transparent;
  --epic-button-stroke: transparent;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--brand {
  --epic-button-bg: var(--color-button-category-brand-bg);
  --epic-button-bg-hover: var(--color-button-category-brand-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-brand-bg-pressed);
  --epic-button-fg: var(--color-button-category-brand-fg);
  --epic-button-stroke: var(--color-button-category-brand-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--black {
  --epic-button-bg: var(--color-button-category-black-bg);
  --epic-button-bg-hover: var(--color-button-category-black-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-black-bg-pressed);
  --epic-button-fg: var(--color-button-category-black-fg);
  --epic-button-stroke: var(--color-button-category-black-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--gray {
  --epic-button-bg: var(--color-button-category-gray-bg);
  --epic-button-bg-hover: var(--color-button-category-gray-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-gray-bg-pressed);
  --epic-button-fg: var(--color-button-category-gray-fg);
  --epic-button-stroke: var(--color-button-category-gray-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--white {
  --epic-button-bg: var(--color-button-category-white-bg);
  --epic-button-bg-hover: var(--color-button-category-white-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-white-bg-pressed);
  --epic-button-fg: var(--color-button-category-white-fg);
  --epic-button-stroke: var(--color-button-category-white-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--rose {
  --epic-button-bg: var(--color-button-category-rose-bg);
  --epic-button-bg-hover: var(--color-button-category-rose-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-rose-bg-pressed);
  --epic-button-fg: var(--color-button-category-rose-fg);
  --epic-button-stroke: var(--color-button-category-rose-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--amber {
  --epic-button-bg: var(--color-button-category-amber-bg);
  --epic-button-bg-hover: var(--color-button-category-amber-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-amber-bg-pressed);
  --epic-button-fg: var(--color-button-category-amber-fg);
  --epic-button-stroke: var(--color-button-category-amber-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--emerald {
  --epic-button-bg: var(--color-button-category-emerald-bg);
  --epic-button-bg-hover: var(--color-button-category-emerald-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-emerald-bg-pressed);
  --epic-button-fg: var(--color-button-category-emerald-fg);
  --epic-button-stroke: var(--color-button-category-emerald-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--sky {
  --epic-button-bg: var(--color-button-category-sky-bg);
  --epic-button-bg-hover: var(--color-button-category-sky-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-sky-bg-pressed);
  --epic-button-fg: var(--color-button-category-sky-fg);
  --epic-button-stroke: var(--color-button-category-sky-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--indigo {
  --epic-button-bg: var(--color-button-category-indigo-bg);
  --epic-button-bg-hover: var(--color-button-category-indigo-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-indigo-bg-pressed);
  --epic-button-fg: var(--color-button-category-indigo-fg);
  --epic-button-stroke: var(--color-button-category-indigo-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--plum {
  --epic-button-bg: var(--color-button-category-plum-bg);
  --epic-button-bg-hover: var(--color-button-category-plum-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-plum-bg-pressed);
  --epic-button-fg: var(--color-button-category-plum-fg);
  --epic-button-stroke: var(--color-button-category-plum-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--danger {
  --epic-button-bg: var(--color-button-category-danger-bg);
  --epic-button-bg-hover: var(--color-button-category-danger-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-danger-bg-pressed);
  --epic-button-fg: var(--color-button-category-danger-fg);
  --epic-button-stroke: var(--color-button-category-danger-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--warning {
  --epic-button-bg: var(--color-button-category-warning-bg);
  --epic-button-bg-hover: var(--color-button-category-warning-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-warning-bg-pressed);
  --epic-button-fg: var(--color-button-category-warning-fg);
  --epic-button-stroke: var(--color-button-category-warning-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--success {
  --epic-button-bg: var(--color-button-category-success-bg);
  --epic-button-bg-hover: var(--color-button-category-success-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-success-bg-pressed);
  --epic-button-fg: var(--color-button-category-success-fg);
  --epic-button-stroke: var(--color-button-category-success-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}

:is(.epic-button--category, .epic-button--icon-category).epic-button--info {
  --epic-button-bg: var(--color-button-category-info-bg);
  --epic-button-bg-hover: var(--color-button-category-info-bg-hover);
  --epic-button-bg-pressed: var(--color-button-category-info-bg-pressed);
  --epic-button-fg: var(--color-button-category-info-fg);
  --epic-button-stroke: var(--color-button-category-info-stroke);
  --epic-button-fg-hover: initial;
  --epic-button-fg-pressed: initial;
}