/* Base Button Styles */
.squishy {
  position: relative;
  border: none;
  cursor: pointer;
  transition: all 250ms;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.squishy i {
  width: 1.75rem;
}

/* Blue Squishy */
.squishy-classic {
  background: linear-gradient(45deg, #2c73c4, #4ca1ff); /* main color */
  color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 
    inset 0 1px 0 0 #5a9be0,  /* lighter highlight */
    0 1px 0 0 #2c73c4,
    0 2px 0 0 #2767b0,
    0 4px 0 0 #215a9c,
    0 5px 0 0 #1b4e88,
    0 6px 0 0 #154274,
    0 7px 0 0 #103660,
    0 7px 8px 0 #91919121; /* darkest shadow */
}

.squishy-classic:hover {
  transform: translateY(4px);
  box-shadow: 
    inset 0 1px 0 0 #5a9be0,
    0 1px 0 0 #2c73c4,
    0 1px 0 0 #2767b0,
    0 2px 0 0 #215a9c,
    0 2px 0 0 #1b4e88,
    0 3px 0 0 #154274,
    0 4px 0 0 #103660,
    0 4px 6px 0 #83838346;
}