.player .control-button {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: transparent;
  display: inline-block;
  opacity: 0.8;
  border: none;
  padding: 0;
  cursor: pointer;

  &.button-badge {
    position: relative;

    &:after {
      top: -4px;
      right: -1px;
    }
  }

  i {
    width: 32px;
    height: 32px;
  }

  &.active {
    opacity: 1;
  }

  &:disabled {
    opacity: 0.4;
    cursor: default;
  }

  &.control-button-rounded {
    width: 36px;
    height: 36px;
    padding: 2px;
  }
}

.player:not(.touch) {
  .control-button:not(:disabled) {
    &:hover {
      opacity: 1;
    }

    &.control-button-rounded:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 18px;
    }
  }
}

.player .control-button-container {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.player.touch {
  .player .control-button-container {
    position: static;
  }
  .control-button {
    position: relative;
  }
}

.player.state-idle {
  .no-idle-control {
    display: none;
  }
}

.rotate {
  -moz-animation: spin 0.3s 1 linear;
  -o-animation: spin 0.3s 1 linear;
  -webkit-animation: spin 0.3s 1 linear;
  animation: spin 0.3s 1 linear;
}

.reverse-rotate {
  -moz-animation: reverse-spin 0.3s 1 linear;
  -o-animation: reverse-spin 0.3s 1 linear;
  -webkit-animation: reverse-spin 0.3s 1 linear;
  animation: reverse-spin 0.3s 1 linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(359deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(359deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(359deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(359deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(359deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes reverse-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@-moz-keyframes reverse-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@-o-keyframes reverse-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@-ms-keyframes reverse-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes reverse-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}