@mixin pauseShowing() {
  .play-icon-shapes > .play {
    opacity: 0;
  }
  .play-icon-shapes > .pause {
    opacity: 1;
  }
}

@mixin playShowing() {
  .play-icon-shapes > .play {
    opacity: 1;
  }
  .play-icon-shapes > .pause {
    opacity: 0;
  }
}

@mixin showRadiatingWaves() {
  .play-icon-shapes .outer-circle-fx {
    display: block;
    animation: pulse-rings-outer 5s 1s infinite;
    fill: RGB(var(--color-primary-1-darker));
  }

  .play-icon-shapes .inner-circle-fx {
    display: block;
    animation: pulse-rings-inner 5s 1s infinite;
    fill: RGB(var(--color-primary-1-darker));
  }
}

@mixin hideRadiatingWaves() {
  .play-icon-shapes .fx > * {
    animation: none;
  }
}

@keyframes pulse-rings-outer {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  8% {
    transform: scale(2);
    opacity: 0.3;
  }
  16% {
    transform: scale(2);
    opacity: 0.3;
  }
  40%, 100% { // delay before starting the next round
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes pulse-rings-inner {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  8% {
    transform: scale(1.7);
    opacity: 0.2;
  }
  16% {
    transform: scale(1.7);
    opacity: 0.2;
  }
  40%, 100% { // delay before starting the next round
    transform: scale(2.125);
    opacity: 0;
  }
}

@keyframes bigSpin {
  0% {
  }
  100% {
    transform: rotate(360deg);
  }
}

@mixin spinner(
  $primary: rgba(239,239,239,1),
  $accent: rgba(176,176,175,1),
  $innerWidth: 14px,
  $innerHeight: 14px,
  $outerWidth: 30px,
  $outerHeight: 30px,
  $borderWidth: 6px,
  $top: 0px,
  $left: 20px,
  $right: 140px,
  $bottom: 0px
) {
  &:before { //inner spinner
    content: '';
    display: block;
    position: absolute;
    top: #{$top};
    left: #{$left + 1};
    right: #{$right};
    bottom: #{$bottom};
    margin: auto;
    width: #{$innerWidth};
    height: #{$innerWidth};
    border: #{$borderWidth} solid $primary;
    border-radius: 50%;
    border-left-color: $accent;
    border-top-color: $accent;

    animation: bigSpin .8s linear infinite;
    transform-origin: 50% 50%;
  }
  &:after { //outer spinner
    content: '';
    display: block;
    position: absolute;
    top: #{$top};
    left: #{$left - $innerWidth/2};
    right: #{$right};
    bottom: #{$bottom};
    margin: auto;
    width: #{$outerWidth};
    height: #{$outerHeight};
    border: #{$borderWidth} solid $primary;
    border-radius: 50%;
    border-left-color: $accent;
    border-top-color: $accent;

    text-align: center;
    animation: bigSpin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    transform-origin: 50% 50%;
  }
}

.play-button {
  cursor: pointer;
  position: relative;
  appearance: none;
  border: 0;
  display: flex;
  justify-content: center;
  transition: all 0.1s ease-in-out;
  overflow: visible !important;

  svg {
    // Essential for radiating waves animation
    overflow: visible;
    // Not quite sure why, but specifiying a clip path allows overflow to work in safari
    clip-path: circle(125px at 50% 50%);
    max-width: 100%;
  }

  &:hover {
    background-color: transparent;
    transition: all 0.1s ease-in-out;
    transform: translateY(-4px);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 1);
  }

  &.is-icon-only {
    &:hover {
      box-shadow: none;
      transform: none;
    }
  }

  &.is-paused {
    @include playShowing();
    @include showRadiatingWaves();
  }

  &.is-paused:hover {
    @include hideRadiatingWaves();
  }

  &.is-paused.is-loading {
    @include hideRadiatingWaves();
  }

  &.is-playing {
    @include pauseShowing();
    opacity: 0.9;

    .button-label {
      display: none;
      padding: 0;
    }
  }

  &.is-loading {
    //.play-button-text {
    //  opacity: 0;
    //}

    .play-icon-shapes {
      .play, .pause {
        opacity: 0;
      }
    }

    @include spinner(
      $primary: rgba(white, 0),
      $accent: white
    );
  }

  .play-icon-shapes {
    > * {
      transition: opacity 0.1s ease-in-out;
    }

    .play {
      fill: #FFF;
      stroke: none;
    }

    .outer-circle {
      stroke: #FFF;
      stroke-width: 3px;
    }

    .inner-circle {
      display: none; // we'll always hide this one
    }

    .outer-circle-fx, .inner-circle-fx {
      pointer-events: none;
      transform-origin: center;
      fill: transparent;
      stroke: transparent;
      transition: all 0.5 ease-in-out;
      transform: scale(0);
      opacity: 0;
    }
  }
}