/* Figma "Frame 5": grey block, bold white label, 3px gradient stroke on the
   bottom edge only, drawn outside the box. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 4px 32px;
  border: 0;
  background: var(--grey);
  color: var(--white);
  font: 700 16px / 21px var(--sans);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--underline);
}

.btn:hover { background: #6e6e6e; }
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn--dark { background: var(--ink); }
.btn--dark:hover { background: #262626; }