.em-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--em-color-main);
  color: var(--em-color-page);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.25s ease;
  border: 1px solid transparent;
  text-transform: uppercase;
}

.em-button:hover {
  background-color: var(--em-color-blue);
}

.em-button__icon {
  font-size: 1.25rem;
}

.em-button--accent {
  background-color: var(--em-color-accent);
  color: var(--em-color-blue);
}

.em-button--accent:hover {
  background-color: var(--em-color-blue);
  color: var(--em-color-page);
}

.em-button--outline {
  border-color: var(--em-color-main);
  color: var(--em-color-main);
  background-color: transparent;
}

.em-button--outline:hover {
  background-color: var(--em-color-main);
  color: var(--em-color-page);
}

.em-button--outline--accent {
  border-color: var(--em-color-accent);
  color: var(--em-color-accent);
  background-color: transparent;
}

.em-button--outline--accent:hover {
  background-color: var(--em-color-accent);
  color: var(--em-color-page);
}

body.palette-navy .em-button {
  color: var(--em-color-accent);
}

body.palette-navy .em-button:hover {
  color: var(--em-color-page);
}

body.palette-navy .em-button--accent {
  color: var(--em-color-page);
}