.btn {
  background: none;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--typography-Body-Regular-fontFamily);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 1%;
}

.primary {
  color: var(--font-color);
  background-color: var(--background-color);
}

.primary:hover,
.primary:active,
.primary:focus {
  background-color: var(--hover-background);
  color: var(--hover-color);
}

.secondary {
  background-color: transparent;
  border: 0.1rem solid var(--background-color);
  color: var(--background-color);
}

.secondary:hover,
.secondary:active,
.secondary:focus {
  border: 0.1rem solid var(--hover-color);
  color: var(--hover-color);
}

.default {
  align-items: center;
  border-radius: 4rem;
  display: flex;
  gap: 1rem;
}

.icon {
  font-size: 1.8rem;
  align-items: baseline;
}

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

/* Sizes */
.small {
  padding: var(--Spacing-x1) var(--Spacing-x2);
  gap: 0.2rem;

  font-size: 1.4rem;
  height: 4rem;
}

.medium {
  height: 3rem;
  padding: 1.2rem var(--Spacing-x2);

  font-size: 1.6rem;
}

.large {
  padding: var(--Spacing-x2) 2.4rem;
  gap: 0.4rem;

  font-size: 1.6rem;
}

.primaryLight {
  --font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
  --background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal);
  --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover);
  --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
  --disabled-background-color: var(
    --Theme-Primary-Light-Button-Primary-Fill-Disabled
  );
  --disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
}

.primaryDark {
  --font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
  --background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal);
  --hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
  --hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover);
  --disabled-background-color: var(
    --Theme-Primary-Dark-Button-Primary-Fill-Disabled
  );
  --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
}

.secondaryLight {
  --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
  --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
  --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
  --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover);
  --disabled-background-color: var(
    --Theme-Secondary-Light-Button-Primary-Fill-Disabled
  );
  --disabled-color: var(
    --Theme-Secondary-Light-Button-Primary-On-Fill-Disabled
  );
}

.secondaryDark {
  --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
  --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
  --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
  --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover);
  --disabled-background-color: var(
    --Theme-Secondary-Dark-Button-Primary-Fill-Disabled
  );
  --disabled-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
}

.tertiaryLight {
  --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
  --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
  --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
  --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover);
  --disabled-background-color: var(
    --Theme-Tertiary-Light-Button-Primary-Fill-Disabled
  );
  --disabled-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
}

.tertiaryDark {
  --font-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
  --background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
  --hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
  --hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
  --disabled-background-color: var(
    --Theme-Tertiary-Dark-Button-Primary-Fill-Disabled
  );
  --disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}