.button {
  align-items: center;
  background: var(--color-black);
  border-radius: 2.2125em;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  font-family: var(--font-family-cartridge);
  font-feature-settings: normal;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.025em;
  line-height: 1.05em;
  pointer-events: auto;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.button span {
  margin-bottom: -0.1625em;
  margin-top: -0.1875em;
  padding: 0.7375em 1.0875em;
}



.button.button--icon svg {
  display: flex;
  height: 1.15em;
  margin-left: 0.5875em;
  max-height: 100%;
  width: auto;
}

.button.button--icon span {
  padding-left: 0.375em;
}

.button.button--large {
  font-size: var(--font-size-x-small);
}

.button.button--large span {
  margin-bottom: -0.1125em;
  margin-top: -0.2em;
  padding: 0.8375em 1.1875em;
}

.button.button--large.button--icon svg {
  margin-left: 0.675em;
}

.button.button--large.button--icon span {
  padding-left: 0.425em;
}

.button.button--outline {
  background: var(--color-canvas-light);
  box-shadow: var(--box-shadow-pill);
  color: var(--color-ink);
}
.button--size-small {
  font-size: var(--font-size-x-small);
  padding: 0.7em 1.1em 0.72em 1.1em;
}

.button--size-x-small {
  font-size: var(--font-size-xx-small);
  padding: 0.6em 1em 0.625em 1em;
}



@media(hover: hover) {

  .button {
    transition:
      background var(--transition),
      box-shadow var(--transition),
      color var(--transition),
      transform var(--transition)
    ;
    will-change: transform;
  }

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

  .button:active {
    transform: scale(0.98) translateY(0.0125em);
  }

  .button.button--outline:focus,
  .button.button--outline:hover {
    background: var(--color-canvas-light);
    box-shadow: var(--box-shadow-pill-hover);
    color: var(--color-ink);
  }

}



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

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

  @media(hover: hover) {

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

  }

}