/*
  1. Base
*/
/*
  2. Components
*/
div.control-container {
    margin-top: 10px;

    padding: 0 1em 1em 1em;
}

div.control-container div.amplitude-play-pause {
    width      : 74px;
    height     : 74px;
    cursor     : pointer;
    float      : left;
    margin-left: 5px;
}

div.control-container div.amplitude-play-pause.amplitude-paused {
    background     : url("/assets/img/audio-player-play.svg");
    background-size: cover;
}

div.control-container div.amplitude-play-pause.amplitude-playing {
    background     : url("/assets/img/audio-player-pause.svg");
    background-size: cover;
}

div.control-container div.meta-container {
    float     : left;
    width     : calc(100% - 84px);
    text-align: center;
    color     : white;
    margin-top: 10px;
}

div.control-container div.meta-container span[data-amplitude-song-info="name"] {
    font-family: "Open Sans", sans-serif;
    font-size  : 18px;
    color      : #fff;
    display    : block;
}

div.control-container div.meta-container span[data-amplitude-song-info="artist"] {
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
    font-size  : 14px;
    color      : #fff;
    display    : block;
}

div.control-container:after {
    content: "";
    display: table;
    clear  : both;
}

/*
  Small only
*/
@media screen and (max-width: 39.9375em) {
    div.control-container div.amplitude-play-pause {
        background-size: cover;
        width          : 64px;
        height         : 64px;
    }

    div.control-container div.meta-container {
        width: calc(100% - 74px);
    }
}

/*
  Medium only
*/
/*
  Large Only
*/
div.time-container {
    opacity    : 0.5;
    font-family: 'Open Sans';
    font-weight: 100;
    font-size  : 12px;
    color      : #fff;
    height     : 15px;
}

div.time-container span.current-time {
    float      : left;
    margin-left: 5px;
}

div.time-container span.duration {
    float       : right;
    margin-right: 5px;
}

progress.amplitude-song-played-progress {
    background-color  : #313252;
    -webkit-appearance: none;
    appearance        : none;
    width             : 100%;
    height            : 15px;
    display           : block;
    cursor            : pointer;
    border            : none;
    margin-top        : -4px;
}

progress.amplitude-song-played-progress:not([value]) {
    background-color: #313252;
}

progress[value]::-webkit-progress-bar {
    background-color: #313252;
}

progress[value]::-moz-progress-bar {
    background-color: #00a0ff;
}

progress[value]::-webkit-progress-value {
    background-color: #00a0ff;
}

div.bottom-container {
    background-color          : #202136;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius : 10px;
}

div.audio-player {
    border-radius         : 10px;
    width                 : 100%;
    -webkit-font-smoothing: antialiased;
}

@media screen and (min-width: 720px) {
    div.audio-player {
        min-width: 560px;
    }
}

div.audio-player img[data-amplitude-song-info="cover_art_url"] {
    width                  : 100%;
    border-top-right-radius: 10px;
    border-top-left-radius : 10px;
    background             : white;
}