@import "../var/options";
@import "../var/colors";
@import "../var/component/feedback";

.feedback-active {
  z-index: map_get($z-index, "base");
  position: relative;
  overflow: hidden;

  &.feedback-light .feedback {
    background-color: rgba($white, .25);
  }
  &.feedback-dark .feedback {
    background-color: rgba($black, .25);
  }

  .feedback {
    display: none;
    position: absolute;
    border-radius: 50%;
    padding: 50% 0;
    height: auto;
    width: 100%;

    transform-origin: center;
    transform: scale(0);
    opacity: 0;

    &.feedback-in {
      display: inline-block;
      animation: $feedback-animation;
    }
  }
}

@keyframes feedback-in {
  50% {
    transform: scale(1);
    opacity: .2;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}