/*
 * Button
 */

@mixin button {
  --button-min-width: 4rem;
  --button-bg: var(--color-primary);
  --button-text: var(--color-white);
  --button-x-padding: 1.5rem;
  --button-y-padding: 1rem;
  --button-gap: 0.5ch;
  --focus-color: var(--color-primary);
  --hover-transition: var(--transition-base);

  display: inline-flex;
  gap: var(--button-gap);
  align-items: center;
  justify-content: center;
  line-height: var(--leading-flat);
  position: relative;
  border-radius: var(--radius-sm);
  border: var(--stroke-base);
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-text);
  padding: var(--button-y-padding) var(--button-x-padding);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: var(--size-md);
  font-weight: var(--font-bold);
  transition: var(--transition-base);
  min-width: var(--button-min-width);

  &:hover,
  &:focus-visible {
    opacity: 0.8;
  }

  &:active {
    transform: scale(99%);
  }
}

.button,
input[type="submit"] {
  @include button;
}

.button.button--secondary {
  @include button;

  --button-bg: rgba(255, 255, 255, 0.8);
  --button-text: var(--color-dark);
  --focus-color: var(--color-dark);
}
