.navigation-button {
  align-items: center;
  background-color: var(--navigation-button-background-color, var(--color-midnight));
  block-size: var(--navigation-button-size, 6rem);
  border-radius: 50%;
  color: var(--navigation-button-color, var(--color-white));
  display: inline-flex;
  font-size: var(--navigation-button-icon-size, 2.4rem);
  inline-size: var(--navigation-button-size, 6rem);
  justify-content: center;
  line-height: 0;
  touch-action: manipulation;
  transition-property: background-color, color, opacity;
  user-select: none;

  &:is([disabled]) {
    background-color: var(--navigation-button-background-color--disabled, var(--color-grey-x-light));
    color: var(--navigation-button-color--disabled, var(--color-grey-dark));
  }

  &:is(:hover:not([disabled]), :focus-visible:not(.has-invisible-focus)) {
    background-color: var(--navigation-button-background-color--engaged, var(--color-orange));
    color: var(--navigation-button-color--engaged, var(--color-white));
  }
}