.button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 24px;
  background: none;
  color: var(--Base-Text-Inverted);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 300ms ease;
  font-family: Helvetica;
  font-weight: 400;
}

/* Primary styles */
.primary {
  background-color: var(--Primary-Fill-Strong-Default);
  border: 2px solid transparent;
  outline: 1px solid transparent;
}

.primary:hover {
  background: var(--Primary-Fill-Strong-Hovered);
}

.primary:active,
.primary:focus {
  border: 2px solid var(--Base-Text-Inverted);
  outline: 1px solid var(--Primary-Border-Strong);
}

/* Secondary styles */
.secondary {
  border: 1px solid var(--Base-Border-Normal);
  background-color: var(--Base-Background-Normal);
  color: var(--Primary-Text-Strong);
}

.secondary:hover {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 2px solid var(--Primary-Border-Hovered);
  outline-offset: -1px;
}

.secondary:active,
.secondary:focus {
  border: 1px solid var(--Primary-Border-Strong);
  outline: 1px solid var(--Base-Border-Normal);
  outline-offset: -4px;
}

/* Disabled styles */
.button:disabled {
  background-color: var(--Base-Fill-Disabled);
  color: var(--Base-Text-Disabled);
  cursor: not-allowed;
  border: none;
  outline: none;
}

/* Sizes */
.large {
  font-size: var(--typography-body-regular-font-size);
  line-height: var(--typography-body-regular-line-height);
  letter-spacing: var(--typography-body-regular-letter-spacing);
}

.normal {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.096px;
}

.small {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.096px;
}