.button {
  --base: 0.2rem;
  --border-r-outer: calc(var(--base) * 3);
  --border-r-inner: calc(var(--base) * 2);
  --grey: oklch(0.2 0 0);
  --grey-dark: oklch(0.1 0 0);
  --grey-light: oklch(0.25 0 0);
  --red-dark: oklch(0.2 0.1 0);
  --red-mid: oklch(0.3 0.1 0);
  --red-light: oklch(0.25 0.1 0);
  --green-dark: oklch(0.2 0.1 120);
  --green-mid: oklch(0.3 0.1 120);
  --green-light: oklch(0.25 0.1 120);
  --yellow-dark: oklch(0.2 0.1 100);
  --yellow-mid: oklch(0.3 0.1 100);
  --yellow-light: oklch(0.25 0.1 100);
  --text-light: oklch(0.9 0 0);
  --text-mid: oklch(0.75 0 0);
  --text-off: oklch(0.5 0 0);

  background:
    radial-gradient(at 13% -3%,
      oklch(0.8 0 0 / 0.25),
      oklch(0.8 0 0 / 0.05) 5%,
      transparent 10%,
      transparent) border-box no-repeat,
    linear-gradient(oklch(0.8 0 0 / 0.15),
      var(--grey-light) 1%,
      transparent 4%,
      transparent 100%) border-box,
    linear-gradient(var(--grey-light),
      var(--grey)) padding-box,
    linear-gradient(var(--grey),
      var(--grey-dark)) border-box;
  border: calc(var(--base) * 2) solid transparent;
  border-radius: var(--border-r-outer);
  box-shadow: 0 0.calc(var(--base) * 4) 0.calc(var(--base) * 4) 0.calc(var(--base) * 4) var(--grey);
  padding: calc(var(--base) * 0.6);

  input[type="radio"],
  input[type="checkbox"] {
    display: none;
  }

  .label {
    align-items: center;
    background:
      radial-gradient(at 10% 10%,
        oklch(0.8 0 0 / 0.45),
        oklch(0.8 0 0 / 0.05) 5%,
        transparent 10%,
        transparent) no-repeat,
      linear-gradient(oklch(0.8 0 0 / 0.15),
        var(--red-dark) 5%,
        var(--red-light) 50%,
        var(--red-dark) 100%) border-box,
      linear-gradient(var(--red-light),
        var(--red-dark),
        var(--red-light)) padding-box;
    border: var(--base) solid transparent;
    border-radius: var(--border-r-inner);
    box-shadow: inset 0 0 calc(var(--base) * 2) calc(var(--base) * 2) var(--red-mid);
    color: var(--text-off);
    display: flex;
    font-family: 'Allerta Stencil', sans-serif;
    font-size: calc(var(--base) * 4);
    font-weight: bold;
    justify-content: center;
    padding: var(--base) calc(var(--base) * 2);
    user-select: none;
    -webkit-user-select: none;
    text-wrap: nowrap;
    text-transform: uppercase;
    transition: transform 0.2s cubic-bezier(.6, .1, .8, .60);

    &:has(:checked) {
      transform: scale(0.98);
    }

    &:active {
      transform: scale(0.97);
      transition: transform 0.1s cubic-bezier(.1, .8, .7, .9);
    }

    &:active,
    &:has(:checked) {
      --red-dark: oklch(0.25 0.1 0);
      --red-light: oklch(0.5 0.5 0);

      box-shadow:
        0 0 calc(var(--base) * 0.6) calc(var(--base) * 0.6) var(--red-mid),
        inset 0 0 calc(var(--base) * 2) calc(var(--base) * 2) oklch(from var(--red-dark) l 0.05 h / 0.25);
      color: var(--text-light);
      text-shadow: 0 0 3px var(--text-mid);
    }
  }

  .label-green {
    background:
      radial-gradient(at 10% 10%,
        oklch(0.8 0 0 / 0.45),
        oklch(0.8 0 0 / 0.05) 5%,
        transparent 10%,
        transparent) no-repeat,
      linear-gradient(oklch(0.8 0 0 / 0.15),
        var(--green-dark) 5%,
        var(--green-light) 50%,
        var(--green-dark) 100%) border-box,
      linear-gradient(var(--green-light),
        var(--green-dark),
        var(--green-light)) padding-box;
    box-shadow: inset 0 0 calc(var(--base) * 2) calc(var(--base) * 2) var(--green-mid);

    &:active,
    &:has(:checked) {
      --green-dark: oklch(0.25 0.1 120);
      --green-light: oklch(0.5 0.5 120);

      box-shadow:
        0 0 calc(var(--base) * 0.6) calc(var(--base) * 0.6) var(--green-mid),
        inset 0 0 calc(var(--base) * 2) calc(var(--base) * 2) oklch(from var(--green-dark) l 0.05 h / 0.25);
    }
  }

  .label-yellow {
    background:
      radial-gradient(at 10% 10%,
        oklch(0.8 0 0 / 0.45),
        oklch(0.8 0 0 / 0.05) 5%,
        transparent 10%,
        transparent) no-repeat,
      linear-gradient(oklch(0.8 0 0 / 0.15),
        var(--yellow-dark) 5%,
        var(--yellow-light) 50%,
        var(--yellow-dark) 100%) border-box,
      linear-gradient(var(--yellow-light),
        var(--yellow-dark),
        var(--yellow-light)) padding-box;
    box-shadow: inset 0 0 calc(var(--base) * 2) calc(var(--base) * 2) var(--yellow-mid);

    &:active,
    &:has(:checked) {
      --yellow-dark: oklch(0.25 0.1 100);
      --yellow-light: oklch(0.8 0.5 100);

      box-shadow:
        0 0 calc(var(--base) * 0.6) calc(var(--base) * 0.6) var(--yellow-mid),
        inset 0 0 calc(var(--base) * 2) calc(var(--base) * 2) oklch(from var(--yellow-dark) l 0.05 h / 0.25);
    }
  }
}

.button-enter {
  width: fit-content;

  .label {
    padding-inline: 1.5rem;
  }
}