/* Reversible surface trial. The final gradient in each stack preserves the original fill. */
.destination {
  background:
    radial-gradient(ellipse at 45% 0%, #fbfaf724, #fbfaf700 62%),
    linear-gradient(180deg, #fbfaf70c 0%, #fbfaf700 48%, #11131725 100%),
    linear-gradient(112deg, #2b2721f7, #111317f2 75%);
  box-shadow:
    inset 0 2px 2px -1px #fbfaf747,
    inset 0 -5px 7px -4px #090a0dcc,
    inset 0 0 0 1px #fbfaf70a,
    0 3px 4px -2px #36230d40,
    0 13px 25px -12px #36230d66;
}

.destination-disabled {
  background:
    radial-gradient(ellipse at 45% 0%, #fbfaf717, #fbfaf700 62%),
    linear-gradient(110deg, #f0ede414, #4c4a4319);
  box-shadow:
    inset 0 2px 2px -1px #fbfaf733,
    inset 0 -3px 5px -3px #6a625a33,
    inset 0 0 0 1px #fbfaf70a,
    0 7px 16px -12px #36230d26;
}

@media (hover: hover) {
  .destination:not(:disabled):hover {
    background:
      radial-gradient(ellipse at 45% 0%, #fbfaf72e, #fbfaf700 62%),
      linear-gradient(180deg, #fbfaf70e 0%, #fbfaf700 48%, #11131725 100%),
      linear-gradient(112deg, #383024, #151820 75%);
    box-shadow:
      inset 0 2px 2px -1px #fbfaf75c,
      inset 0 -5px 7px -4px #090a0dcc,
      inset 0 0 0 1px #fbfaf70f,
      0 4px 6px -3px #36230d40,
      0 17px 29px -13px #36230d73;
  }
}