@import '../../variables';

.#{$prefix}-ui-hugeplaybacktogglebutton {
  @extend %ui-button;

  @keyframes #{$prefix}-fade-out {
    from {
      opacity: 1;
      visibility: visible;
    }

    to {
      opacity: 0;
      transform: scale(2);
      visibility: hidden;
    }
  }

  @keyframes #{$prefix}-fade-in {
    from {
      opacity: 0;
      transform: scale(2);
      visibility: visible;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes #{$prefix}-breathe {
    30% {
      transform: scale(1.1);
    }

    60% {
      transform: scale(1);
    }
  }

  cursor: default;
  height: 8em;
  outline: none;
  overflow: hidden; // hide overflow from scale animation
  width: 8em;

  .#{$prefix}-ui-icon {
    background-image: svg-load('../../assets/images/play.svg', fill=$color-icon);
    background-size: $icon-size-large;
    height: 100%;
    width: 100%;

    &:hover {
      animation: #{$prefix}-breathe 3s ease-in-out infinite;
    }
  }

  &.#{$prefix}-on {
    .#{$prefix}-ui-icon {
      animation: #{$prefix}-fade-out $animation-duration cubic-bezier(0.55, 0.055, 0.675, 0.19); // http://easings.net/de#easeInCubic
      transition: visibility 0s $animation-duration;
      visibility: hidden;
    }
  }

  &.#{$prefix}-off {
    .#{$prefix}-ui-icon {
      animation: #{$prefix}-fade-in $animation-duration cubic-bezier(0.55, 0.055, 0.675, 0.19); // http://easings.net/de#easeInCubic
      visibility: visible;
    }
  }

  &.#{$prefix}-no-transition-animations {
    &.#{$prefix}-on,
    &.#{$prefix}-off {
      .#{$prefix}-ui-icon {
        animation: none;
        transition: none;
      }
    }
  }

  &:focus {
    border-radius: unset;
    background-color: unset;
    backdrop-filter: none;
  }

  &:active {
    transform: unset;
  }
}