.semtle-btn {
  --epic-btn-background: transparent;
  --epic-btn-border-color: transparent;
  --epic-btn-foreground: var(--epic-btn-font-base);

  align-items: center;
  background: var(--epic-btn-background);
  border: var(--epic-btn-border-width) solid var(--epic-btn-border-color);
  border-radius: var(--epic-btn-radius);
  color: var(--epic-btn-foreground);
  cursor: pointer;
  display: inline-flex;
  gap: var(--epic-btn-gap);
  height: var(--epic-btn-height);
  justify-content: center;
  line-height: 1;
  padding: 0 var(--epic-btn-padding);
  text-decoration: none;
  user-select: none;
}

.semtle-btn:disabled {
  cursor: not-allowed;
}

.semtle-btn--full {
  width: 100%;
}

.semtle-btn--icon-only {
  padding-inline: 0;
  width: var(--epic-btn-height);
}

.semtle-btn--name {
  padding-inline: 0;
}

.semtle-btn__icon {
  align-items: center;
  display: inline-flex;
  font-size: var(--epic-btn-icon-font-size);
  line-height: 1;
}

.semtle-btn--icon-only .semtle-btn__icon {
  font-size: var(--epic-btn-icon-mode-size);
}

.semtle-btn--fill {
  --epic-btn-background: var(--epic-btn-accent, var(--epic-btn-flat-base));
  --epic-btn-foreground: var(--epic-btn-fill-foreground);
}

.semtle-btn--fill:hover:not(:disabled) {
  background: var(--epic-btn-flat-hover);
  color: var(--epic-btn-fill-hover-foreground);
}

.semtle-btn--subtle {
  --epic-btn-background: var(--epic-btn-flat-soft);
  --epic-btn-foreground: var(--epic-btn-font-soft);
}

.semtle-btn--subtle:hover:not(:disabled) {
  background: var(--epic-btn-flat-soft-hover);
  color: var(--epic-btn-font-hover);
}

.semtle-btn--category {
  --epic-btn-background: var(--epic-btn-flat-soft);
  --epic-btn-border-color: var(--epic-btn-flat-base);
  --epic-btn-foreground: var(--epic-btn-font-soft);
}

.semtle-btn--category:hover:not(:disabled) {
  background: var(--epic-btn-flat-soft-hover);
  color: var(--epic-btn-font-hover);
}

.semtle-btn--ghost {
  --epic-btn-background: var(--epic-semantic-button-outline-background);
  --epic-btn-border-color: var(--epic-btn-flat-base);
  --epic-btn-foreground: var(--epic-btn-ghost-foreground, var(--epic-btn-font-base));
}

.semtle-btn--ghost:hover:not(:disabled) {
  background: var(--epic-btn-flat-soft-transparent);
  color: var(--epic-btn-font-hover);
}

.semtle-btn--outline {
  --epic-btn-background: var(--epic-semantic-button-outline-background);
  --epic-btn-border-color: var(--epic-semantic-button-outline-line);
  --epic-btn-foreground: var(
    --epic-btn-outline-foreground,
    var(--epic-btn-font-base)
  );
}

.semtle-btn--outline:hover:not(:disabled) {
  background: var(--epic-btn-flat-soft-hover);
  color: var(
    --epic-btn-outline-foreground-hover,
    var(--epic-btn-font-soft)
  );
}

.semtle-btn--name {
  background: transparent;
  border-color: transparent;
  color: var(--epic-btn-font-base);
}

.semtle-btn--name:hover:not(:disabled) {
  color: var(
    --epic-btn-name-hover-foreground,
    var(--epic-btn-font-soft)
  );
}

.semtle-btn--xl {
  --epic-btn-border-width: var(--epic-button-input-xxl-border-width);
  --epic-btn-gap: var(--epic-button-input-xxl-gap);
  --epic-btn-height: var(--epic-button-input-xxl-height);
  --epic-btn-icon-font-size: var(--epic-button-input-xxl-icon-font-size);
  --epic-btn-icon-mode-size: var(--epic-button-input-xxl-icon-mode-size);
  --epic-btn-padding: var(--epic-button-input-xxl-padding);
  --epic-btn-radius: var(--epic-button-input-xxl-corner-radius);
}

.semtle-btn--l {
  --epic-btn-border-width: var(--epic-button-input-l-button-border-width);
  --epic-btn-gap: var(--epic-button-input-l-button-gap);
  --epic-btn-height: var(--epic-button-input-l-common-height);
  --epic-btn-icon-font-size: var(--epic-button-input-l-button-icon-font-size);
  --epic-btn-icon-mode-size: var(--epic-button-input-l-button-icon-size);
  --epic-btn-padding: var(--epic-button-input-l-common-padding);
  --epic-btn-radius: var(--epic-button-input-l-common-corner-radius);
}

.semtle-btn--m {
  --epic-btn-border-width: var(--epic-button-input-m-common-border-width);
  --epic-btn-gap: var(--epic-button-input-m-button-gap);
  --epic-btn-height: var(--epic-button-input-m-common-height);
  --epic-btn-icon-font-size: var(--epic-button-input-m-button-icon-size);
  --epic-btn-icon-mode-size: var(--epic-button-input-m-button-icon-size);
  --epic-btn-padding: var(--epic-button-input-m-common-padding);
  --epic-btn-radius: var(--epic-button-input-m-common-corner-radius);
}

.semtle-btn--s {
  --epic-btn-border-width: var(--epic-button-input-m-common-border-width);
  --epic-btn-gap: var(--epic-button-input-s-button-gap);
  --epic-btn-height: var(--epic-button-input-s-button-height);
  --epic-btn-icon-font-size: var(--epic-button-input-s-button-icon-size);
  --epic-btn-icon-mode-size: var(--epic-button-input-s-button-icon-size);
  --epic-btn-padding: var(--epic-button-input-s-button-padding);
  --epic-btn-radius: var(--epic-button-input-s-button-corner);
}

.semtle-btn--xs {
  --epic-btn-border-width: var(--epic-button-input-xs-button-border-width);
  --epic-btn-gap: var(--epic-button-input-xs-button-gap);
  --epic-btn-height: var(--epic-button-input-xs-button-height);
  --epic-btn-icon-font-size: var(--epic-button-input-xs-button-icon-size);
  --epic-btn-icon-mode-size: var(--epic-button-input-xs-button-icon-size);
  --epic-btn-padding: var(--epic-button-input-xs-button-padding);
  --epic-btn-radius: var(--epic-button-input-xs-button-corner);
}

.semtle-btn--intent-black {
  --epic-btn-accent: var(--epic-color-black-flat-base);
  --epic-btn-flat-base: var(--epic-color-black-flat-base);
  --epic-btn-flat-hover: var(--epic-color-black-flat-light);
  --epic-btn-flat-soft: var(--epic-color-black-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-black-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-black-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-black-font-base);
  --epic-btn-font-hover: var(--epic-color-black-font-hover-strong);
  --epic-btn-font-soft: var(--epic-color-black-font-base);
  --epic-btn-fill-foreground: var(--epic-color-black-font-inverse);
  --epic-btn-fill-hover-foreground: var(--epic-color-black-font-inverse-hover);
  --epic-btn-ghost-foreground: var(--epic-color-black-font-base);
  --epic-btn-name-hover-foreground: var(--epic-color-black-font-hover-strong);
}

.semtle-btn--intent-blue {
  --epic-btn-accent: var(--epic-color-blue-flat-base);
  --epic-btn-flat-base: var(--epic-color-blue-flat-base);
  --epic-btn-flat-hover: var(--epic-color-blue-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-blue-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-blue-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-blue-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-blue-font-base);
  --epic-btn-font-hover: var(--epic-color-blue-font-hover);
  --epic-btn-font-soft: var(--epic-color-brand-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-brand {
  --epic-btn-accent: var(--epic-color-brand-flat-base);
  --epic-btn-flat-base: var(--epic-color-brand-flat-base);
  --epic-btn-flat-hover: var(--epic-color-brand-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-brand-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-brand-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-brand-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-brand-font-base);
  --epic-btn-font-hover: var(--epic-color-brand-font-hover);
  --epic-btn-font-soft: var(--epic-color-brand-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-charcoal {
  --epic-btn-accent: var(--epic-color-charcoal-flat-base);
  --epic-btn-flat-base: var(--epic-color-charcoal-flat-base);
  --epic-btn-flat-hover: var(--epic-color-charcoal-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-charcoal-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-charcoal-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-charcoal-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-charcoal-font-base);
  --epic-btn-font-hover: var(--epic-color-charcoal-font-hover);
  --epic-btn-font-soft: var(--epic-color-charcoal-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-cyan {
  --epic-btn-accent: var(--epic-color-cyan-flat-base);
  --epic-btn-flat-base: var(--epic-color-cyan-flat-base);
  --epic-btn-flat-hover: var(--epic-color-cyan-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-cyan-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-cyan-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-cyan-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-cyan-font-base);
  --epic-btn-font-hover: var(--epic-color-cyan-font-hover);
  --epic-btn-font-soft: var(--epic-color-cyan-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-name-hover-foreground: var(--epic-color-cyan-font-soft-base);
}

.semtle-btn--intent-forest {
  --epic-btn-accent: var(--epic-color-forest-flat-base);
  --epic-btn-flat-base: var(--epic-color-forest-flat-base);
  --epic-btn-flat-hover: var(--epic-color-forest-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-forest-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-forest-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-forest-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-forest-font-base);
  --epic-btn-font-hover: var(--epic-color-forest-font-hover);
  --epic-btn-font-soft: var(--epic-color-forest-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-gray {
  --epic-btn-accent: var(--epic-color-gray-flat-base);
  --epic-btn-flat-base: var(--epic-color-gray-flat-base);
  --epic-btn-flat-hover: var(--epic-color-gray-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-gray-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-gray-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-gray-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-gray-font-base);
  --epic-btn-font-hover: var(--epic-color-gray-font-hover);
  --epic-btn-font-soft: var(--epic-color-gray-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-green {
  --epic-btn-accent: var(--epic-color-green-flat-base);
  --epic-btn-flat-base: var(--epic-color-green-flat-base);
  --epic-btn-flat-hover: var(--epic-color-green-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-green-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-green-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-green-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-green-font-base);
  --epic-btn-font-hover: var(--epic-color-green-font-hover);
  --epic-btn-font-soft: var(--epic-color-green-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-black-button);
}

.semtle-btn--intent-indigo {
  --epic-btn-accent: var(--epic-color-indigo-flat-base);
  --epic-btn-flat-base: var(--epic-color-indigo-flat-base);
  --epic-btn-flat-hover: var(--epic-color-indigo-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-indigo-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-indigo-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-indigo-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-indigo-font-base);
  --epic-btn-font-hover: var(--epic-color-indigo-font-hover);
  --epic-btn-font-soft: var(--epic-color-indigo-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-lavendar {
  --epic-btn-accent: var(--epic-color-lavendar-flat-base);
  --epic-btn-flat-base: var(--epic-color-lavendar-flat-base);
  --epic-btn-flat-hover: var(--epic-color-lavendar-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-lavendar-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-lavendar-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-lavendar-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-lavendar-font-base);
  --epic-btn-font-hover: var(--epic-color-lavendar-font-hover);
  --epic-btn-font-soft: var(--epic-color-lavendar-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-lime {
  --epic-btn-accent: var(--epic-color-lime-flat-base);
  --epic-btn-flat-base: var(--epic-color-lime-flat-base);
  --epic-btn-flat-hover: var(--epic-color-lime-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-lime-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-lime-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-lime-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-lime-font-base);
  --epic-btn-font-hover: var(--epic-color-lime-font-hover);
  --epic-btn-font-soft: var(--epic-color-lime-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-black-button);
}

.semtle-btn--intent-mint {
  --epic-btn-accent: var(--epic-color-mint-flat-base);
  --epic-btn-flat-base: var(--epic-color-mint-flat-base);
  --epic-btn-flat-hover: var(--epic-color-mint-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-mint-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-mint-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-mint-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-mint-font-base);
  --epic-btn-font-hover: var(--epic-color-mint-font-hover);
  --epic-btn-font-soft: var(--epic-color-mint-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-black-button);
}

.semtle-btn--intent-navy {
  --epic-btn-accent: var(--epic-color-navy-flat-base);
  --epic-btn-flat-base: var(--epic-color-navy-flat-base);
  --epic-btn-flat-hover: var(--epic-color-navy-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-navy-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-navy-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-navy-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-navy-font-base);
  --epic-btn-font-hover: var(--epic-color-navy-font-hover);
  --epic-btn-font-soft: var(--epic-color-navy-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-orange {
  --epic-btn-accent: var(--epic-color-orange-flat-base);
  --epic-btn-flat-base: var(--epic-color-orange-flat-base);
  --epic-btn-flat-hover: var(--epic-color-orange-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-orange-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-orange-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-orange-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-orange-font-base);
  --epic-btn-font-hover: var(--epic-color-orange-font-hover);
  --epic-btn-font-soft: var(--epic-color-orange-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-black-button);
}

.semtle-btn--intent-purple {
  --epic-btn-accent: var(--epic-color-purple-flat-base);
  --epic-btn-flat-base: var(--epic-color-purple-flat-base);
  --epic-btn-flat-hover: var(--epic-color-purple-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-purple-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-purple-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-purple-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-purple-font-base);
  --epic-btn-font-hover: var(--epic-color-purple-font-hover);
  --epic-btn-font-soft: var(--epic-color-purple-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-red {
  --epic-btn-accent: var(--epic-color-red-flat-base);
  --epic-btn-flat-base: var(--epic-color-red-flat-base);
  --epic-btn-flat-hover: var(--epic-color-red-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-red-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-red-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(--epic-color-red-flat-soft-transparent);
  --epic-btn-font-base: var(--epic-color-red-font-base);
  --epic-btn-font-hover: var(--epic-color-red-font-hover);
  --epic-btn-font-soft: var(--epic-color-red-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-white);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-white);
}

.semtle-btn--intent-white {
  --epic-btn-accent: var(--epic-color-white-flat-base);
  --epic-btn-flat-base: var(--epic-color-white-flat-base);
  --epic-btn-flat-hover: var(--epic-color-white-flat-light);
  --epic-btn-flat-soft: var(--epic-color-white-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-white-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-white-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-white-font-base);
  --epic-btn-font-hover: var(--epic-color-white-font-hover-strong);
  --epic-btn-font-soft: var(--epic-color-white-font-base);
  --epic-btn-fill-foreground: var(--epic-color-white-font-inverse);
  --epic-btn-fill-hover-foreground: var(--epic-color-white-font-hover);
  --epic-btn-outline-foreground: var(--epic-color-white-font-inverse);
  --epic-btn-outline-foreground-hover: var(--epic-color-white-font-inverse);
  --epic-btn-name-hover-foreground: var(--epic-color-white-font-hover-strong);
}

.semtle-btn--intent-yellow {
  --epic-btn-accent: var(--epic-color-yellow-flat-base);
  --epic-btn-flat-base: var(--epic-color-yellow-flat-base);
  --epic-btn-flat-hover: var(--epic-color-yellow-flat-hover);
  --epic-btn-flat-soft: var(--epic-color-yellow-flat-soft);
  --epic-btn-flat-soft-hover: var(--epic-color-yellow-flat-soft-hover);
  --epic-btn-flat-soft-transparent: var(
    --epic-color-yellow-flat-soft-transparent
  );
  --epic-btn-font-base: var(--epic-color-yellow-font-base);
  --epic-btn-font-hover: var(--epic-color-yellow-font-hover);
  --epic-btn-font-soft: var(--epic-color-yellow-font-soft-base);
  --epic-btn-fill-foreground: var(--epic-semantic-text-black-button);
  --epic-btn-fill-hover-foreground: var(--epic-semantic-text-black-button);
}