.button {
  background: var(--color-blue);
  border-radius: calc(var(--border-radius) / 2);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-medium);
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  line-height: 1em;
  padding: 0.75em 0.9em;
  place-content: center;
  pointer-events: auto;
  text-decoration: none;
}

.button span {
  margin-block: -0.125em;
}



.button--app {
  background: var(--color-ink);
  padding: 0;
}

.button--signup {
  background: url('/assets/images/general/logo-mark.webp') 0.75em center / 2.375em auto no-repeat var(--color-blue);
  border-radius: calc(var(--border-radius) / 1.5);
  box-shadow: var(--box-shadow-button);
  padding: 1.25em;
  padding-left: 3.625em;
}

.button--deny {
  background: oklch(var(--oklch-white) / 0.1);
  color: var(--color-white);
}

.button--grant {
  background: var(--color-white);
  color: var(--color-ink);
}

.button--icon {
  background-position: 0.625em center;
  background-repeat: no-repeat;
  background-size: 1.25em auto;
  padding-left: 2.375em;
}

.button--basecamp {
  background-image: url('/assets/images/general/icon-basecamp.svg');
}

.button--github {
  background-image: url('/assets/images/general/icon-github.svg');
}

.button--previous,
.button--next {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1em auto;
  height: 2.5em;
  padding: 0;
  width: 4em;
}

.button--previous {
  background-image: url('/assets/images/general/icon-previous.svg');
}

.button--next {
  background-image: url('/assets/images/general/icon-next.svg');
}

.button--text {
  background: transparent;
  color: var(--color-ink);
}

.button--small {
  font-size: var(--font-size);
  letter-spacing: var(--letter-spacing);
}



@media(hover: hover) {

  .button {
    transition:
      background-color var(--transition),
      color var(--transition)
    ;
  }

  .button:focus,
  .button:hover {
    background-color: var(--color-blue-hover);
    color: var(--color-white);
  }

  .button--app:focus,
  .button--app:hover {
    background-color: var(--color-ink-hover);
  }

  .button--text:focus,
  .button--text:hover {
    background-color: oklch(var(--oklch-ink) / 0.08);
    color: var(--color-ink);
  }

  .button--deny:focus,
  .button--deny:hover {
    background: oklch(var(--oklch-white) / 0.15);
    color: var(--color-white);
  }

  .button--grant:focus,
  .button--grant:hover {
    background: oklch(var(--oklch-white) / 0.9);
    color: var(--color-ink);
  }

}



@media(prefers-color-scheme: dark) {

  .button--app {
    background: var(--color-ink-inverted);
  }

  .button--app:focus,
  .button--app:hover {
    background-color: var(--color-ink-inverted-hover);
  }

}