.btn {
  background: none;
  border: none;
  cursor: pointer;
  /* TODO: Waiting for variables for buttons from Design team */
  font-family: var(--typography-Body-Regular-fontFamily);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 1%;
  margin: 0;
  padding: 0;
  text-align: center;
}

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

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

.secondary,
a.secondary {
  background-color: transparent;
  border: 1px solid var(--background-color);
  color: var(--background-color);
}

.secondary:hover,
a.secondary:hover,
.secondary:active,
a.secondary:active,
.secondary:focus,
a.secondary:focus {
  border: 1px solid var(--hover-color);
  color: var(--hover-color);
}

.default,
a.default {
  align-items: center;
  border-radius: 50px;
  /* No variable yet */
  display: flex;
  gap: var(--Spacing-x1);
}

.icon {
  align-items: baseline;
  font-size: 18px;
}

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

/* Sizes */
.small {
  font-size: 14px;
  gap: var(--Spacing-x2);
  height: 40px;
  padding: var(--Spacing-x1) var(--Spacing-x2);
}

.medium {
  font-size: 16px;
  height: 30px;
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
}

.large {
  font-size: 16px;
  height: 50px;
  gap: var(--Spacing-x-half);
  padding: var(--Spacing-x2) var(--Spacing-x3);
}

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

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

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