button,
a.button {
  appearance: none;
  outline: transparent;
  border: unset;
  text-decoration: none;
  padding: var(--space-100) var(--space-200);
  border-radius: var(--radius-m);
  text-transform: capitalize;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

button.solid,
a.button.solid {
  background-color: var(--button-main-color);
  color: var(--black-500);
  /* Ensure that solid & outline buttons are the same size */
  border: var(--border-s) solid var(--button-main-color);
  min-width: 100px;
}

button.outline,
a.button.outline {
  background-color: transparent;
  backdrop-filter: blur(5px) brightness(1);
  border: var(--border-s) solid var(--button-main-color);
  color: var(--button-main-color);
  min-width: 100px;
}

button.outline:hover,
button.outline:active,
a.button.outline:hover,
a.button.outline:active {
  background-color: var(--color-layer);
}

@supports (backdrop-filter: blur(5px) brightness(0.25)) {
  button.outline,
  a.button.outline {
    filter: unset;
    transition: backdrop-filter 250ms;
  }
  button.outline:hover,
  a.button.outline:hover {
    filter: unset;
    backdrop-filter: blur(5px) brightness(0.25);
  }
  button.outline:active,
  a.button.outline:active {
    filter: unset;
    backdrop-filter: blur(5px) brightness(0.5);
  }
}
button.text,
a.button.text {
  padding: unset;
  color: var(--button-main-color);
  background-color: transparent;
}

button.primary,
a.button.primary {
  --button-main-color: var(--color-primary);
}

button.simple,
a.button.simple {
  --button-main-color: var(--color-text);
}

button:hover,
a.button:hover {
  filter: brightness(1.5);
}

button:active,
a.button:active {
  filter: brightness(0.8);
}

button:disabled,
a.button:disabled {
  filter: grayscale(1);
  opacity: 0.5;
  cursor: not-allowed;
}

button:focus-visible,
a.button:focus-visible {
  outline: 3px solid var(--yellow-300);
}