.button {
  background: linear-gradient(
    135deg,
    var(--color-blurple) 0,
    var(--color-salmon) 100%
  );
  border-radius: 2.5em;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-feature-settings: 'c2sc', 'smcp';
  font-size: var(--font-size-small);
  font-weight: 500;
  justify-content: center;
  letter-spacing: -0.0175em;
  line-height: 1em;
  padding: 0.6em 1.1em 0.675em 1.1em;
  pointer-events: auto;
  text-align: center;
  text-decoration: none;
}

.button span {
  z-index: 1;
}

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

.button--color-blurbalt {
  background: linear-gradient(
    135deg,
    var(--color-blurple) 0,
    var(--color-cobalt) 100%
  );
}

.button--color-stone {
  background: var(--color-stone);
  color: var(--color-black);
}

.button--color-salmon {
  background: linear-gradient(
    135deg,
    var(--color-salmon) 0,
    var(--color-coral) 100%
  );
}

.button--signup {
  padding: 0;
}

.button--signup span {
  background-image: url(/assets/images/general/icon.svg);
  background-position: 0.575em center;
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  padding: 0.6em 1em 0.625em 2.1em;
}

.button--icon-rss span {
  background-image: url(/assets/images/general/icon-rss.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0.675em 0.675em;
  padding-left: 0.925em;
}

.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;
}

.button--stacked {
  padding: 0.95em 1.7em 0.775em 1.7em;
}

.button--stacked dl {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  z-index: 1;
}

.button--stacked dl dd {
  font-size: var(--font-size-xx-small);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.0125em;
}

@media(hover: hover) {

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

  .button--color-stone:focus,
  .button--color-stone:hover {
    color: var(--color-black);
  }

  .button--glow {
    --pointer-x-px: calc(var(--pointer-x) * 1px);
    --pointer-y-px: calc(var(--pointer-y) * 1px);
    overflow: hidden;
    position: relative;
  }

  .button--glow:after {
    background: radial-gradient(
      8em circle at var(--pointer-x-px) var(--pointer-y-px),
      rgba(var(--rgb-peach), 0.1),
      rgba(var(--rgb-peach), 0)
    );
    border-radius: inherit;
    content: '';
    height: 100%;
    inset: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity var(--transition);
    width: 100%;
  }

  .button--glow:focus:after,
  .button--glow:hover:after {
    opacity: 1;
  }

}

@media(min-width: 64em) {

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

  .button--signup span {
    padding: 0.7em 1em 0.72em 2.1em;
  }

}