.button {

  align-items: center;
  background: var(--color-blue);
  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;

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

  &.button--icon {

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

    span {
      padding-left: 0.375em;
    }

  }

  &.button--large {

    font-size: var(--font-size-x-small);

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

    &.button--icon {

      svg {
        margin-left: 0.675em;
      }

      span {
        padding-left: 0.425em;
      }

    }

  }

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

  @media(hover: hover) {

    transition:
      background var(--transition),
      box-shadow var(--transition),
      color var(--transition),
      transform var(--transition)
    ;
    will-change: transform;

    &:focus,
    &:hover {

      background: var(--color-blue-hover);
      color: var(--color-white);

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

    }

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

  }

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

    color: var(--color-ink-inverted);

    @media(hover: hover) {

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

    }

  }

}