/* EMBED MEDIA PLAYER */
%themeDark %player {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: transparent;
}
%playerAudioControls {
  background: transparent;
}
%playerVideoControls {
  background: rgba(0, 0, 0, 0.6);
}
%player {
  %playerMetadataDownload,
  %playerControlIcon {
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    &:hover {
      opacity: 1;
    }
  }
  %playerMetadataIcon {
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
%playerAudioMetadata {
  &:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url(https://clearvision.github.io/icons/file_music.svg) center/100% no-repeat;
    opacity: 0.5;
  }
  %playerMetadataSize {
    color: hsla(0, 0%, 100%, 0.3);
  }
}

// MEDIA BAR
%playerMediaBarWrapper {
  background: hsla(0, 0%, 100%, 0.07);
  &:before,
  &:after {
    background: hsla(0, 0%, 100%, 0.07);
  }
}
%playerMediaBarBuffer {
  background: hsla(0, 0%, 100%, 0.04);
  opacity: 1;
  &:before,
  &:after {
    background: hsla(0, 0%, 100%, 0.04);
    opacity: 1;
  }
}
%playerMediaBarGrabber,
%playerMediaBarProgress {
  background: $main-color;
  transition: background 0.15s ease-in-out;
}
%playerMediaBarProgress {
  &:before,
  &:after {
    background: $main-color;
  }
}
%playerMediaBarPreview {
  background: #fff;
  &:before,
  &:after {
    background: #fff;
  }
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
%playerMediaBarBubble {
  background: $main-color;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
  transform: translateX(-50%) rotateX(-90deg);
  transform-origin: 50% 100%;
  transition: all 0.15s ease-in-out, left 0s;
  &:before {
    border-top-color: $main-color;
  }
}
%playerMediaBarInteraction:hover {
  %playerMediaBarGrabber {
    background: $main-color;
  }
  %playerMediaBarPreview {
    opacity: 0.1;
  }
}
%playerMediaBarInteractionDragging {
  %playerMediaBarProgress,
  %playerMediaBarGrabber,
  %playerMediaBarBubble {
    background: $hover-color;
  }
  %playerMediaBarBubble {
    &:before {
      border-top-color: $hover-color;
    }
  }
}
%playerMediaBarInteraction:hover,
%playerMediaBarInteractionDragging {
  %playerMediaBarWrapper {
    box-shadow: none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
  }
  %playerMediaBarBubble {
    transform: translateX(-50%);
  }
}