.shadow-md-filter {
  /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
  filter: drop-shadow(0 0 8px #000) drop-shadow(0 0 4px #000);
}

.circle-clip-favor-right--small {
  clip-path: circle(67% at 55% 6%);
}

.circle-clip-favor-right--large {
  clip-path: circle(72% at 50% 6%);
}

@keyframes spring-clip-out {
  0% {
    @apply circle-clip-favor-right--small;
  }
  100% {
    @apply circle-clip-favor-right--large;
  }
}

@keyframes spring-clip-in {
  0% {
    @apply circle-clip-favor-right--large;
  }
  100% {
    @apply circle-clip-favor-right--small;
  }
}

@keyframes spring-clip-in-to-collapsed {
  0% {
    @apply circle-clip-favor-right--large;
  }
  100% {
    clip-path: circle(0% at 100% 0%);
  }
}

/** TODO: Use Tailwind features to generate these responsive variants **/

.md_circle-clip-favor-right--small {
  clip-path: circle(65% at 65% 6%);
}

.md_circle-clip-favor-right--large {
  clip-path: circle(70% at 60% 6%);
}

@keyframes md_spring-clip-out {
  0% {
    @apply md_circle-clip-favor-right--small;
  }
  100% {
    @apply md_circle-clip-favor-right--large;
  }
}

@keyframes md_spring-clip-in {
  0% {
    @apply md_circle-clip-favor-right--large;
  }
  100% {
    @apply md_circle-clip-favor-right--small;
  }
}

@keyframes md_spring-clip-in-to-collapsed {
  0% {
    @apply md_circle-clip-favor-right--large;
  }
  100% {
    clip-path: circle(0% at 100% 0%);
  }
}