ux-media-player {
  position: relative;
  display: block;
  box-shadow: @mediaplayer-shadow;
  outline: none;
  background-color: #101010; // Not a variable - matches standard video background color

  &.video {
    height: 500px;
  }

  &.fullscreen {
    width: 100vw;
    height: 100vh;
    border: none;
  }

  &.quiet {
    .control-bar {
      position: absolute;
      background-color: @mediaplayer-controls-quiet-bg;
      bottom: 0;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    &.hover {
      .control-bar {
        opacity: 1;
      }
    }

    .video-player-container {
      height: 100%;
    }
  }

  .player-container {
    height: 100%;

    &:focus {
      outline: none;
    }
  }

  .video-player-container {
    position: relative;
    height: ~'calc(100% - 71px)';

    .video-player {
      width: 100%;
      height: 100%;

      &:focus {
        outline: none;
      }
    }

    .video-overlay {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;

      .play-graphic {
        width: 100px;
        height: 100px;

        .play-circle {
          fill: @mediaplayer-play-btn-bg;
        }

        .play-triangle {
          fill: @mediaplayer-play-btn-color;
        }
      }

      &.playing {
        .play-graphic {
          transition:
            opacity 0.3s ease-in-out,
            transform 0.3s ease-in-out;
          opacity: 0;
          transform: scale(1.2);
        }
      }
    }
  }

  .audio-player {
    display: flex;
    flex-direction: column;
    background-color: @mediaplayer-audio-bg;
    align-items: center;
    padding: 18px 18px 16px;
    border-bottom: 1px solid @mediaplayer-audio-border;
    box-shadow: @mediaplayer-audio-shadow;

    .audio-file-name {
      color: @mediaplyer-audio-title;
      margin-bottom: 0;
      margin-top: 6px;
    }

    .audio-file-format {
      color: @mediaplyer-audio-subtitle;
      margin-bottom: 0;
    }

    .audio-file-size {
      color: @mediaplyer-audio-subtitle;
      margin-bottom: 0;
    }
  }

  .control-bar {
    width: 100%;
    min-height: 71px;
    background-color: @mediaplayer-controls-bg;

    &.control-bar-visible {
      opacity: 1;
    }
  }
}