:root {
  --button-background-color: var(--color-orange);
  --button-background-color-active: var(--color-white);
  --button-border-color: var(--button-background-color);
  --button-border-size: 4px;
  --button-color: var(--color-midnight);
  --button-color-active: var(--color-midnight);
  --button-font-size: 1.6rem;
  --button-height: 6.2rem;
  --button-line-height: 1.2;
  --button-outline-background-color-active: var(--color-orange);
  --button-outline-background-color: transparent;
  --button-outline-border-color: var(--color-orange);
  --button-outline-color: var(--color-midnight);
  --button-outline-color-active: var(--color-midnight);
  --button-width: auto;
}

.button {
  --button-text-height: calc(var(--button-font-size) * var(--button-line-height));

  background-color: var(--button-background-color);
  border: var(--button-border-size) solid var(--button-border-color);
  color: var(--button-color);
  display: inline-flex;
  font-size: var(--button-font-size);
  font-weight: bold;
  inline-size: var(--button-width);
  justify-content: center;
  line-height: var(--button-line-height);
  min-block-size: var(--button-height);
  padding: calc((var(--button-height) - var(--button-text-height)) / 2 - var(--button-border-size)) calc(var(--button-font-size) * 2);
  transition-duration: var(--duration-fast);
  transition-property: background-color, border-color, text-decoration-color;
  user-select: none;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus), .button--active),
  .has-button:is(:hover, :focus-within) &:not([disabled]) {
    --underline-color: currentColor;
    --underline-height: 2px;
    --button-color: var(--button-color-active);
    --button-background-color: var(--button-background-color-active);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.button--outline {
  --button-background-color-active: var(--button-outline-background-color-active);
  --button-background-color: var(--button-outline-background-color);
  --button-border-color: var(--button-outline-border-color);
  --button-color: var(--button-outline-color);
  --button-color-active: var(--button-outline-color-active);
}