.btn {
  background: none;
  /* No variable yet for radius 50px */
  border-radius: 50px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-align: center;
  transition:
    background-color 300ms ease,
    color 300ms ease;

  /* TODO: Waiting for variables for buttons from Design team */
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
  font-weight: var(--typography-Body-Bold-fontWeight);
  line-height: 24px;
  letter-spacing: 0.6%;
}

/* 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;
}

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

.icon {
  align-items: baseline;
}

/* SIZES */
.small {
  gap: var(--Spacing-x-quarter);
  height: 40px;
  padding: var(--Spacing-x1) var(--Spacing-x2);
}

.medium {
  gap: var(--Spacing-x-quarter);
  height: 48px;
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
}

.large {
  gap: var(--Spacing-x-half);
  height: 56px;
  padding: var(--Spacing-x2) var(--Spacing-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);
}

.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);
}

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

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

.baseTertiary:disabled {
  background-color: var(--Base-Button-Tertiary-Fill-Disabled);
  color: 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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tertiaryLightPrimary:disabled {
  background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Disabled);
  color: var(--Theme-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);
}