.pushable {
  --button-clr: var(--ash-90);
  --button-bg: var(--gold-20);
  --button-edge-center: var(--gold-50);
  --button-edge-corner: var(--gold-80);
  --button-disabled-bg: var(--cassis-90);
  --button-disabled-clr: var(--cassis-70);
}

@media (prefers-color-scheme: light) {
  .pushable.purple {
    --button-clr: var(--ash-10);
    --button-bg: var(--cassis-80);
    --button-edge-center: var(--cassis-90);
    --button-edge-corner: var(--cassis-100);
  }
}

.pushable {
  cursor: pointer;
  outline-offset: 6px;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: filter .25s;
  display: inline-block;
  position: relative;
}

.pushable > .shadow {
  will-change: transform;
  background: #00000040;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.3, .7, .4, 1);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(2px);
}

.pushable > .edge {
  background: linear-gradient(to left, var(--button-edge-corner, #52001b) 0%, var(--button-edge-center, #a30036) 8%, var(--button-edge-center, #a30036) 92%, var(--button-edge-corner, #52001b) 100%);
  border-radius: 12px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pushable > .front {
  color: var(--button-clr, white);
  background: var(--button-bg, #f0003c);
  will-change: transform;
  border-radius: 6px;
  gap: 16px;
  padding: 8px 16px;
  font-size: 1.15rem;
  transition: transform .6s cubic-bezier(.3, .7, .4, 1);
  display: flex;
  position: relative;
  transform: translateY(-4px);
}

.pushable:hover {
  filter: brightness(110%);
}

.pushable:hover > .front {
  transition: transform .25s cubic-bezier(.3, .7, .4, 1.5);
  transform: translateY(-6px);
}

.pushable:focus {
  outline: 2px solid var(--button-bg, #f0003c);
}

.pushable:focus:not(:focus-visible) {
  outline: none;
}

.pushable:active > .front {
  transition: transform 34ms;
  transform: translateY(-2px);
}

.pushable:hover > .shadow {
  transition: transform .25s cubic-bezier(.3, .7, .4, 1.5);
  transform: translateY(4px);
}

.pushable:active > .shadow {
  transition: transform 34ms;
  transform: translateY(1px);
}

.pushable[aria-disabled="true"]:hover {
  filter: none;
}

.pushable[aria-disabled="true"] > .front {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-clr);
}

.pushable[aria-disabled="true"] > .shadow, .pushable[aria-disabled="true"] > .edge {
  display: none;
}

.pushable[aria-disabled="true"] > .front {
  transform: none !important;
}