button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0.5rem; /* {radius.md} */
  padding: 3px 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-wrap: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* {button.gap} */
  min-height: 31px;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

button.rounded {
  border-radius: 1.75rem;
}

button.raised {
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.04),
    0 0 1px rgba(0, 0, 0, 0.45);
}

/* =========================
   FILLED SEVERITIES
   ========================= */

button.primary {
  background: #1E1B15;   /* {surface.950} -> {Ideally-Core.graphite.10} */
  color: #FFFFFE;        /* {surface.0} -> {Ideally-Core.graphite.100} */
  border-color: transparent;
}

button.primary:hover {
  background: #312D25;   /* {surface.900} -> {Ideally-Core.graphite.20} */
  color: #FFFFFE;
}

button.primary:active {
  background: #474238;   /* {surface.800} -> {Ideally-Core.graphite.30} */
  color: #FFFFFE;
}

button.secondary {
  background: #FFFFFE;   /* {surface.0} */
  color: #222222;        /* {Surface.Text.main} */
  border-color: transparent;
}

button.secondary:hover {
  background: #E4E2DD;   /* {surface.200} */
  color: #666666;        /* {Surface.Text.sub} */
}

button.secondary:active {
  background: #F4F2EE;   /* {State.highlight.background} */
  color: #222222;        /* {Surface.Text.main} */
}

/* =========================
   STYLE MODIFIERS
   ========================= */

button.outlined {
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
}

button.primary.outlined {
  background: transparent;
  color: #1E1B15;        /* {primary.color} */
  border-color: #E4E2DD; /* {primary.200} */
}

button.primary.outlined:hover {
  background: #F4F2EE;   /* {primary.100} */
  color: #1E1B15;
}

button.primary.outlined:active {
  background: #F4F2EE;   /* {primary.100} */
  color: #1E1B15;
}

button.secondary.outlined {
  background: transparent;
  color: #99948A;        /* {surface.500} */
  border-color: #E4E2DD; /* {surface.200} */
}

button.secondary.outlined:hover {
  background: #F4F2EE;   /* {surface.100} */
  color: #99948A;
}

button.secondary.outlined:active {
  background: #F4F2EE;   /* {surface.100} */
  color: #99948A;
}

/* TEXT = no border, no fill */
button.text {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

button.primary.text {
  color: #1E1B15;        /* {primary.color} */
}

button.primary.text:hover {
  background: #F4F2EE;   /* {primary.100} */
  color: #1E1B15;
}

button.primary.text:active {
  background: #F4F2EE;   /* {primary.100} */
  color: #1E1B15;
}

button.secondary.text {
  color: #99948A;        /* {surface.500} */
}

button.secondary.text:hover {
  background: #FAF9F7;   /* {surface.50} */
  color: #99948A;
}

button.secondary.text:active {
  background: #F4F2EE;   /* {surface.100} */
  color: #99948A;
}