.control-button-container.control-play-pause .control-button {
  transition: 400ms transform;

  .icon-pause,
  .icon-stop {
    transition: 400ms opacity;
    opacity: 0;
    display: none;
  }
  .icon-play {
    transition: 400ms opacity;
    opacity: 1;
    display: block;
  }

  &.is-playing {
    transform: rotate(360deg);

    .icon-pause,
    .icon-stop {
      opacity: 1;
      display: block;
    }
    .icon-play {
      opacity: 0;
      display: none;
    }
  }
  &:focus {
    outline: 2px solid $tab-focus-color !important;
    box-shadow: 0 0 0 2px white !important;
    outline-offset: 2px;
  }
}