.btn {
  background: none;
  border-radius: var(--Corner-radius-rounded);
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-align: center;
  transition:
    background-color 300ms ease,
    color 300ms ease;

  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
  font-weight: 500;
  line-height: var(--typography-Body-Bold-lineHeight);
  letter-spacing: 0.084px;
  text-decoration: none;
}

.wrapping {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fullWidth {
  width: 100%;
}

/* INTENT */
.primary,
a.primary {
  border: none;
}

.secondary,
a.secondary {
  background: none;
  border-style: solid;
  border-width: 2px;
}

.tertiary,
a.tertiary {
  border: none;
}

.inverted,
a.inverted {
  border: none;
}

.text,
a.text {
  background: none;
  border: none;
  outline: none;
}

/* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */
.text:not(.wrapping) {
  padding: 0 !important;
}

/* VARIANTS */
.default,
a.default {
  align-items: center;
  display: flex;
  gap: var(--Space-x1);
  justify-content: center;
}

.btn.icon:is(.small, .medium, .large) {
  align-items: center;
  display: flex;
  gap: var(--Space-x1);
  justify-content: center;
}

/* SIZES */
.btn.small {
  font-size: var(--typography-Caption-Bold-fontSize);
  line-height: var(--typography-Caption-Bold-lineHeight);
  gap: var(--Space-x025);
  padding: calc(var(--Space-x1) + 2px) var(--Space-x2);
  /* Special case padding to adjust the missing border */
}

.btn.small.secondary {
  padding: var(--Space-x1) var(--Space-x2);
}

.btn.medium {
  gap: var(--Space-x05);
  padding: calc(var(--Space-x15) + 2px) var(--Space-x2);
  /* Special case padding to adjust the missing border */
}

.medium.secondary {
  padding: var(--Space-x15) var(--Space-x2);
}

.btn.large {
  gap: var(--Space-x05);
  padding: calc(var(--Space-x2) + 2px) var(--Space-x3);
  /* Special case padding to adjust the missing border */
}

.large.secondary {
  gap: var(--Space-x05);
  padding: var(--Space-x2) var(--Space-x3);
}

/* DISABLED */
.btn:disabled {
  background-color: var(--disabled-background-color);
  color: var(--disabled-color);
  cursor: not-allowed;
}

/* THEMES */
.basePrimary {
  background-color: var(--Base-Button-Primary-Fill-Normal);
  color: var(--Base-Button-Primary-On-Fill-Normal);
}

.basePrimary:active,
.basePrimary:focus,
.basePrimary:hover {
  background-color: var(--Base-Button-Primary-Fill-Hover);
  color: var(--Base-Button-Primary-On-Fill-Hover);
}

.basePrimary:disabled {
  background-color: var(--Base-Button-Primary-Fill-Disabled);
  color: var(--Base-Button-Primary-On-Fill-Disabled);
}

.icon.basePrimary svg,
.icon.basePrimary svg * {
  fill: var(--Base-Button-Primary-On-Fill-Normal);
}

.icon.basePrimary:active svg,
.icon.basePrimary:focus svg,
.icon.basePrimary:hover svg,
.icon.basePrimary:active svg *,
.icon.basePrimary:focus svg *,
.icon.basePrimary:hover svg * {
  fill: var(--Base-Button-Primary-On-Fill-Hover);
}

.icon.basePrimary:disabled *,
.icon.basePrimary:disabled svg * {
  fill: var(--Base-Button-Primary-On-Fill-Disabled);
}

.baseSecondary {
  background-color: var(--Base-Button-Secondary-Fill-Normal);
  border-color: var(--Base-Button-Secondary-Border-Normal);
  color: var(--Base-Button-Secondary-On-Fill-Normal);
}

.baseSecondary:active,
.baseSecondary:focus,
.baseSecondary:hover {
  background-color: var(--Base-Button-Secondary-Fill-Hover);
  border-color: var(--Base-Button-Secondary-Border-Hover);
  color: var(--Base-Button-Secondary-On-Fill-Hover);
}

.baseSecondary:disabled {
  background-color: var(--Base-Button-Secondary-Fill-Disabled);
  border-color: var(--Base-Button-Secondary-Border-Disabled);
  color: var(--Base-Button-Secondary-On-Fill-Disabled);
}

.icon.baseSecondary svg,
.icon.baseSecondary svg * {
  fill: var(--Base-Button-Secondary-On-Fill-Normal);
}

.icon.baseSecondary:active svg,
.icon.baseSecondary:focus svg,
.icon.baseSecondary:hover svg,
.icon.baseSecondary:active svg *,
.icon.baseSecondary:focus svg *,
.icon.baseSecondary:hover svg * {
  fill: var(--Base-Button-Secondary-On-Fill-Hover);
}

.icon.baseSecondary:disabled svg,
.icon.baseSecondary:disabled svg * {
  fill: var(--Base-Button-Secondary-On-Fill-Disabled);
}

.btn.baseTertiary {
  background-color: var(--Base-Button-Tertiary-Fill-Normal);
  color: var(--Base-Button-Tertiary-On-Fill-Normal);
}

.btn.baseTertiary:active,
.btn.baseTertiary:focus,
.btn.baseTertiary:hover {
  background-color: var(--Base-Button-Tertiary-Fill-Hover);
  color: var(--Base-Button-Tertiary-On-Fill-Hover);
}

.btn.baseTertiary:disabled {
  background-color: var(--Base-Button-Tertiary-Fill-Disabled);
  color: var(--Base-Button-Tertiary-On-Fill-Disabled);
}

.icon.baseTertiary svg,
.icon.baseTertiary svg * {
  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
}

.icon.baseTertiary:active svg,
.icon.baseTertiary:focus svg,
.icon.baseTertiary:hover svg,
.icon.baseTertiary:active svg *,
.icon.baseTertiary:focus svg *,
.icon.baseTertiary:hover svg * {
  fill: var(--Base-Button-Tertiary-On-Fill-Hover);
}

.icon.baseTertiary:disabled svg,
.icon.baseTertiary:disabled svg * {
  fill: var(--Base-Button-Tertiary-On-Fill-Disabled);
}

.baseInverted {
  background-color: var(--Base-Button-Inverted-Fill-Normal);
  color: var(--Base-Button-Inverted-On-Fill-Normal);
}

.baseInverted:active,
.baseInverted:focus,
.baseInverted:hover {
  background-color: var(--Base-Button-Inverted-Fill-Hover);
  color: var(--Base-Button-Inverted-On-Fill-Hover);
}

.baseInverted:disabled {
  background-color: var(--Base-Button-Inverted-Fill-Disabled);
  color: var(--Base-Button-Inverted-On-Fill-Disabled);
}

.icon.baseInverted svg,
.icon.baseInverted svg * {
  fill: var(--Base-Button-Inverted-On-Fill-Normal);
}

.icon.baseInverted:active svg,
.icon.baseInverted:focus svg,
.icon.baseInverted:hover svg,
.icon.baseInverted:active svg *,
.icon.baseInverted:focus svg *,
.icon.baseInverted:hover svg * {
  fill: var(--Base-Button-Inverted-On-Fill-Hover);
}

.icon.baseInverted:disabled svg,
.icon.baseInverted:disabled svg * {
  fill: var(--Base-Button-Inverted-On-Fill-Disabled);
}

.baseText {
  color: var(--Base-Button-Text-On-Fill-Normal);
}

.baseTextInverted {
  color: var(--Base-Button-Primary-On-Fill-Normal);
}

.baseText:active,
.baseText:focus,
.baseText:hover {
  color: var(--Base-Button-Text-On-Fill-Hover);
  text-decoration: underline;
}

.baseText:disabled {
  color: var(--Base-Button-Text-On-Fill-Disabled);
}

.icon.baseText svg,
.icon.baseText svg * {
  fill: var(--Base-Button-Text-On-Fill-Normal);
}

.icon.baseText:active svg,
.icon.baseText:focus svg,
.icon.baseText:hover svg,
.icon.baseText:active svg *,
.icon.baseText:focus svg *,
.icon.baseText:hover svg * {
  fill: var(--Base-Button-Text-On-Fill-Hover);
  text-decoration: underline;
}

.icon.baseText:disabled svg,
.icon.baseText:disabled svg * {
  fill: var(--Base-Button-Text-On-Fill-Disabled);
}

.primaryStrongPrimary {
  background-color: var(--Primary-Strong-Button-Primary-Fill-Normal);
  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}

.primaryStrongPrimary:active,
.primaryStrongPrimary:focus,
.primaryStrongPrimary:hover {
  background-color: var(--Primary-Strong-Button-Primary-Fill-Hover);
  color: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
}

.primaryStrongPrimary:disabled {
  background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled);
  color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
}

.icon.primaryStrongPrimary svg,
.icon.primaryStrongPrimary svg * {
  fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}

.icon.primaryStrongPrimary:active svg,
.icon.primaryStrongPrimary:focus svg,
.icon.primaryStrongPrimary:hover svg,
.icon.primaryStrongPrimary:active svg *,
.icon.primaryStrongPrimary:focus svg *,
.icon.primaryStrongPrimary:hover svg * {
  fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
}

.icon.primaryStrongPrimary:disabled svg,
.icon.primaryStrongPrimary:disabled svg * {
  fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
}

.primaryStrongSecondary {
  background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal);
  border-color: var(--Primary-Strong-Button-Secondary-Border-Normal);
  color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
}

.primaryStrongSecondary:active,
.primaryStrongSecondary:focus,
.primaryStrongSecondary:hover {
  background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover);
  border-color: var(--Primary-Strong-Button-Secondary-Border-Hover);
  color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
}

.primaryStrongSecondary:disabled {
  background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled);
  border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled);
  color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
}

.icon.primaryStrongSecondary svg,
.icon.primaryStrongSecondary svg * {
  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
}

.icon.primaryStrongSecondary:active svg,
.icon.primaryStrongSecondary:focus svg,
.icon.primaryStrongSecondary:hover svg,
.icon.primaryStrongSecondary:active svg *,
.icon.primaryStrongSecondary:focus svg *,
.icon.primaryStrongSecondary:hover svg * {
  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
}

.icon.primaryStrongSecondary:disabled svg,
.icon.primaryStrongSecondary:disabled svg * {
  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
}

.primaryDarkPrimary {
  background-color: var(--Primary-Dark-Button-Primary-Fill-Normal);
  color: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
}

.primaryDarkPrimary:active,
.primaryDarkPrimary:focus,
.primaryDarkPrimary:hover {
  background-color: var(--Primary-Dark-Button-Primary-Fill-Hover);
  color: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
}

.primaryDarkPrimary:disabled {
  background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled);
  color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
}

.icon.primaryDarkPrimary svg,
.icon.primaryDarkPrimary svg * {
  fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
}

.icon.primaryDarkPrimary:active svg,
.icon.primaryDarkPrimary:focus svg,
.icon.primaryDarkPrimary:hover svg,
.icon.primaryDarkPrimary:active svg *,
.icon.primaryDarkPrimary:focus svg *,
.icon.primaryDarkPrimary:hover svg * {
  fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
}

.icon.primaryDarkPrimary:disabled svg,
.icon.primaryDarkPrimary:disabled svg * {
  fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
}

.primaryDarkSecondary {
  background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal);
  border-color: var(--Primary-Dark-Button-Secondary-Border-Normal);
  color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
}

.primaryDarkSecondary:active,
.primaryDarkSecondary:focus,
.primaryDarkSecondary:hover {
  background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover);
  border-color: var(--Primary-Dark-Button-Secondary-Border-Hover);
  color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
}

.primaryDarkSecondary:disabled {
  background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled);
  border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled);
  color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
}

.icon.primaryDarkSecondary svg,
.icon.primaryDarkSecondary svg * {
  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
}

.icon.primaryDarkSecondary:active svg,
.icon.primaryDarkSecondary:focus svg,
.icon.primaryDarkSecondary:hover svg,
.icon.primaryDarkSecondary:active svg *,
.icon.primaryDarkSecondary:focus svg *,
.icon.primaryDarkSecondary:hover svg * {
  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
}

.icon.primaryDarkSecondary:disabled svg,
.icon.primaryDarkSecondary:disabled svg * {
  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
}

.primaryLightPrimary {
  background-color: var(--Primary-Light-Button-Primary-Fill-Normal);
  color: var(--Primary-Light-Button-Primary-On-Fill-Normal);
}

.primaryLightPrimary:active,
.primaryLightPrimary:focus,
.primaryLightPrimary:hover {
  background-color: var(--Primary-Light-Button-Primary-Fill-Hover);
  color: var(--Primary-Light-Button-Primary-On-Fill-Hover);
}

.primaryLightPrimary:disabled {
  background-color: var(--Primary-Light-Button-Primary-Fill-Disabled);
  color: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
}

.icon.primaryLightPrimary svg,
.icon.primaryLightPrimary svg * {
  fill: var(--Primary-Light-Button-Primary-On-Fill-Normal);
}

.icon.primaryLightPrimary:active svg,
.icon.primaryLightPrimary:focus svg,
.icon.primaryLightPrimary:hover svg,
.icon.primaryLightPrimary:active svg *,
.icon.primaryLightPrimary:focus svg *,
.icon.primaryLightPrimary:hover svg * {
  fill: var(--Primary-Light-Button-Primary-On-Fill-Hover);
}

.icon.primaryLightPrimary:disabled svg,
.icon.primaryLightPrimary:disabled svg * {
  fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
}

.primaryLightSecondary {
  background-color: var(--Primary-Light-Button-Secondary-Fill-Normal);
  border-color: var(--Primary-Light-Button-Secondary-Border-Normal);
  color: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
}

.primaryLightSecondary:active,
.primaryLightSecondary:focus,
.primaryLightSecondary:hover {
  background-color: var(--Primary-Light-Button-Secondary-Fill-Hover);
  border-color: var(--Primary-Light-Button-Secondary-Border-Hover);
  color: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
}

.primaryLightSecondary:disabled {
  background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled);
  border-color: var(--Primary-Light-Button-Secondary-Border-Disabled);
  color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
}

.icon.primaryLightSecondary svg,
.icon.primaryLightSecondary svg * {
  fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
}

.icon.primaryLightSecondary:active svg,
.icon.primaryLightSecondary:focus svg,
.icon.primaryLightSecondary:hover svg,
.icon.primaryLightSecondary:active svg *,
.icon.primaryLightSecondary:focus svg *,
.icon.primaryLightSecondary:hover svg * {
  fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
}

.icon.primaryLightSecondary:disabled svg,
.icon.primaryLightSecondary:disabled svg * {
  fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
}

.secondaryDarkPrimary {
  background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal);
  color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
}

.secondaryDarkPrimary:active,
.secondaryDarkPrimary:focus,
.secondaryDarkPrimary:hover {
  background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover);
  color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
}

.secondaryDarkPrimary:disabled {
  background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled);
  color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
}

.icon.secondaryDarkPrimary svg,
.icon.secondaryDarkPrimary svg * {
  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
}

.icon.secondaryDarkPrimary:active svg,
.icon.secondaryDarkPrimary:focus svg,
.icon.secondaryDarkPrimary:hover svg,
.icon.secondaryDarkPrimary:active svg *,
.icon.secondaryDarkPrimary:focus svg *,
.icon.secondaryDarkPrimary:hover svg * {
  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
}

.icon.secondaryDarkPrimary:disabled svg,
.icon.secondaryDarkPrimary:disabled svg * {
  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
}

.secondaryDarkSecondary {
  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal);
  border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal);
  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
}

.secondaryDarkSecondary:active,
.secondaryDarkSecondary:focus,
.secondaryDarkSecondary:hover {
  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover);
  border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover);
  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
}

.secondaryDarkSecondary:disabled {
  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled);
  border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled);
  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
}

.icon.secondaryDarkSecondary svg,
.icon.secondaryDarkSecondary svg * {
  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
}

.icon.secondaryDarkSecondary:active svg,
.icon.secondaryDarkSecondary:focus svg,
.icon.secondaryDarkSecondary:hover svg,
.icon.secondaryDarkSecondary:active svg *,
.icon.secondaryDarkSecondary:focus svg *,
.icon.secondaryDarkSecondary:hover svg * {
  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
}

.icon.secondaryDarkSecondary:disabled svg,
.icon.secondaryDarkSecondary:disabled svg * {
  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
}

.secondaryLightPrimary {
  background-color: var(--Secondary-Light-Button-Primary-Fill-Normal);
  color: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
}

.secondaryLightPrimary:active,
.secondaryLightPrimary:focus,
.secondaryLightPrimary:hover {
  background-color: var(--Secondary-Light-Button-Primary-Fill-Hover);
  color: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
}

.secondaryLightPrimary:disabled {
  background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled);
  color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
}

.icon.secondaryLightPrimary svg,
.icon.secondaryLightPrimary svg * {
  fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
}

.icon.secondaryLightPrimary:active svg,
.icon.secondaryLightPrimary:focus svg,
.icon.secondaryLightPrimary:hover svg,
.icon.secondaryLightPrimary:active svg *,
.icon.secondaryLightPrimary:focus svg *,
.icon.secondaryLightPrimary:hover svg * {
  fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
}

.icon.secondaryLightPrimary:disabled svg,
.icon.secondaryLightPrimary:disabled svg * {
  fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
}

.secondaryLightSecondary {
  background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal);
  border-color: var(--Secondary-Light-Button-Secondary-Border-Normal);
  color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
}

.secondaryLightSecondary:active,
.secondaryLightSecondary:focus,
.secondaryLightSecondary:hover {
  background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover);
  border-color: var(--Secondary-Light-Button-Secondary-Border-Hover);
  color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
}

.secondaryLightSecondary:disabled {
  background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled);
  border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled);
  color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
}

.icon.secondaryLightSecondary svg,
.icon.secondaryLightSecondary svg * {
  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
}

.icon.secondaryLightSecondary:active svg,
.icon.secondaryLightSecondary:focus svg,
.icon.secondaryLightSecondary:hover svg,
.icon.secondaryLightSecondary:active svg *,
.icon.secondaryLightSecondary:focus svg *,
.icon.secondaryLightSecondary:hover svg * {
  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
}

.icon.secondaryLightSecondary:disabled svg,
.icon.secondaryLightSecondary:disabled svg * {
  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
}

.tertiaryDarkPrimary {
  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal);
  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
}

.tertiaryDarkPrimary:active,
.tertiaryDarkPrimary:focus,
.tertiaryDarkPrimary:hover {
  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover);
  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
}

.tertiaryDarkPrimary:disabled {
  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled);
  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}

.icon.tertiaryDarkPrimary svg,
.icon.tertiaryDarkPrimary svg * {
  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
}

.icon.tertiaryDarkPrimary:active svg,
.icon.tertiaryDarkPrimary:focus svg,
.icon.tertiaryDarkPrimary:hover svg,
.icon.tertiaryDarkPrimary:active svg *,
.icon.tertiaryDarkPrimary:focus svg *,
.icon.tertiaryDarkPrimary:hover svg * {
  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
}

.icon.tertiaryDarkPrimary:disabled svg,
.icon.tertiaryDarkPrimary:disabled svg * {
  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}

.tertiaryDarkSecondary {
  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal);
  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal);
  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
}

.tertiaryDarkSecondary:active,
.tertiaryDarkSecondary:focus,
.tertiaryDarkSecondary:hover {
  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover);
  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover);
  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
}

.tertiaryDarkSecondary:disabled {
  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled);
  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled);
  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
}

.icon.tertiaryDarkSecondary svg,
.icon.tertiaryDarkSecondary svg * {
  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
}

.icon.tertiaryDarkSecondary:active svg,
.icon.tertiaryDarkSecondary:focus svg,
.icon.tertiaryDarkSecondary:hover svg,
.icon.tertiaryDarkSecondary:active svg *,
.icon.tertiaryDarkSecondary:focus svg *,
.icon.tertiaryDarkSecondary:hover svg * {
  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
}

.icon.tertiaryDarkSecondary:disabled svg,
.icon.tertiaryDarkSecondary:disabled svg * {
  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
}

.tertiaryLightPrimary {
  background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal);
  color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
}

.tertiaryLightPrimary:active,
.tertiaryLightPrimary:focus,
.tertiaryLightPrimary:hover {
  background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover);
  color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
}

.tertiaryLightPrimary:disabled {
  background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled);
  color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
}

.icon.tertiaryLightPrimary svg,
.icon.tertiaryLightPrimary svg * {
  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
}

.icon.tertiaryLightPrimary:active svg,
.icon.tertiaryLightPrimary:focus svg,
.icon.tertiaryLightPrimary:hover svg,
.icon.tertiaryLightPrimary:active svg *,
.icon.tertiaryLightPrimary:focus svg *,
.icon.tertiaryLightPrimary:hover svg * {
  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
}

.icon.tertiaryLightPrimary:disabled svg,
.icon.tertiaryLightPrimary:disabled svg * {
  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
}

.tertiaryLightSecondary {
  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal);
  border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal);
  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
}

.tertiaryLightSecondary:active,
.tertiaryLightSecondary:focus,
.tertiaryLightSecondary:hover {
  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Hover);
  border-color: var(--Tertiary-Light-Button-Secondary-Border-Hover);
  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
}

.tertiaryLightSecondary:disabled {
  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Disabled);
  border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled);
  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
}

.icon.tertiaryLightSecondary svg,
.icon.tertiaryLightSecondary svg * {
  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
}

.icon.tertiaryLightSecondary:active svg,
.icon.tertiaryLightSecondary:focus svg,
.icon.tertiaryLightSecondary:hover svg,
.icon.tertiaryLightSecondary:active svg *,
.icon.tertiaryLightSecondary:focus svg *,
.icon.tertiaryLightSecondary:hover svg * {
  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
}

.icon.tertiaryLightSecondary:disabled svg,
.icon.tertiaryLightSecondary:disabled svg * {
  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
}

button.btn.clean {
  background: none;
  background-color: unset;
  border: none;
  border-color: unset;
  border-radius: unset;
  color: unset;
  gap: unset;
  margin: 0;
  padding: 0;
}