@mixin add-shadow-on-hover($theme) {
  transition: background-color .3s;

  &:hover,
  &:active {
    background-color: map-get($theme, shadow);
  }
}

@mixin add-shadow-on-hover-rounded($theme) {
  border-radius: 9999px; /* this makes non-square rectangle corners rounded equally horizontally and vertically */
  @include add-shadow-on-hover($theme);
}