.a-button {
  --a-btn-bg: var(--color-light-grey);
  --a-btn-fg: var(--color-black);
  --a-btn-pad-x: 80px;
  --a-btn-font-size: var(--type-button-xl);
  --a-btn-line-height: var(--type-button-xl-lh);
  --a-btn-w: 190px;

  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  width: var(--a-btn-w);
  padding: 0 var(--a-btn-pad-x);
  border: 0;
  border-radius: 75px;
  background-color: var(--a-btn-bg);
  color: var(--a-btn-fg);
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--a-btn-font-size);
  line-height: var(--a-btn-line-height);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 90ms ease;
}

.a-button--m {
  --a-btn-pad-x: 80px;
  --a-btn-font-size: var(--type-button-xl);
  --a-btn-w: 190px;
}

.a-button--s {
  --a-btn-pad-x: 56px;
  --a-btn-font-size: var(--type-button-s);
  --a-btn-line-height: var(--type-button-s-lh);
  --a-btn-w: 132px;
}

.a-button--white {
  --a-btn-bg: var(--color-light-grey);
  --a-btn-fg: var(--color-black);
}

.a-button--black {
  --a-btn-bg: var(--color-black);
  --a-btn-fg: var(--color-white);
}

.a-button--white:hover:not(:disabled):not(.is-disabled),
.a-button--white.is-hover {
  --a-btn-bg: var(--color-medium-grey);
  background-color: var(--color-medium-grey);
  transform: translateY(-1px);
}

.a-button--white:active:not(:disabled):not(.is-disabled),
.a-button--white.is-pressed {
  --a-btn-bg: var(--color-black);
  --a-btn-fg: var(--color-white);
  background-color: var(--color-black);
  color: var(--color-white);
  transform: translateY(0.5px);
}

.a-button--black:hover:not(:disabled):not(.is-disabled),
.a-button--black.is-hover {
  --a-btn-bg: var(--color-dark-grey);
  background-color: var(--color-dark-grey);
  transform: translateY(-1px);
}

.a-button--black:active:not(:disabled):not(.is-disabled),
.a-button--black.is-pressed {
  --a-btn-bg: var(--color-black);
  --a-btn-fg: var(--color-white);
  background-color: var(--color-black);
  color: var(--color-white);
  transform: translateY(0.5px);
}

.a-button--m.a-button--black:active:not(:disabled):not(.is-disabled),
.a-button--m.a-button--black.is-pressed {
  --a-btn-bg: var(--color-outside-elements);
  --a-btn-fg: var(--color-black);
  background-color: var(--color-outside-elements);
  color: var(--color-black);
  transform: translateY(0.5px);
}

.a-button:disabled,
.a-button[aria-disabled='true'],
.a-button.is-disabled,
.a-button.is-unable {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .a-button {
    transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
  }

  .a-button:hover,
  .a-button:active,
  .a-button.is-hover,
  .a-button.is-pressed {
    transform: none;
  }
}