/* =========================================================
   CHROME CONTROLS
   Rogue StreamWorks Control Palette
   ========================================================= */


/* =========================================================
   CONTROL PANEL
   ========================================================= */

.player-controls {
    border:
        1px solid
        rgba(210, 210, 210, 0.32);

    background:
        linear-gradient(
            180deg,
            rgba(38, 38, 38, 0.92) 0%,
            rgba(8, 8, 8, 0.96) 50%,
            rgba(25, 25, 25, 0.94) 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18),

        inset 0 -1px 0
        rgba(0, 0, 0, 0.85),

        0 0 12px
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   PLAY / PAUSE BUTTON
   ========================================================= */

.play-button {
    color: #080808;

    border:
        2px solid
        #747474;

    background:
        linear-gradient(
            180deg,

            #ffffff 0%,
            #f5f5f5 18%,
            #d8d8d8 38%,

            #9a9a9a 49%,
            #5c5c5c 52%,

            #777777 68%,
            #a8a8a8 84%,
            #555555 100%
        );

    box-shadow:
        inset 0 2px 2px
        rgba(255, 255, 255, 1),

        inset 0 -3px 4px
        rgba(0, 0, 0, 0.55),

        inset 0 0 8px
        rgba(255, 255, 255, 0.20),

        0 0 0 2px
        rgba(15, 15, 15, 0.95),

        0 0 10px
        rgba(220, 220, 220, 0.25);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.50);
}

.play-button:hover,
.play-button:focus {
    border-color: #cfcfcf;

    background:
        linear-gradient(
            180deg,

            #ffffff 0%,
            #ffffff 18%,
            #e5e5e5 38%,

            #ababab 49%,
            #696969 52%,

            #858585 68%,
            #b8b8b8 84%,
            #626262 100%
        );

    box-shadow:
        inset 0 2px 2px
        rgba(255, 255, 255, 1),

        inset 0 -3px 4px
        rgba(0, 0, 0, 0.50),

        0 0 0 2px
        rgba(20, 20, 20, 0.95),

        0 0 15px
        rgba(235, 235, 235, 0.38);
}

.play-button:active {
    transform: scale(0.97);

    background:
        linear-gradient(
            145deg,
            #8a8a8a 0%,
            #d8d8d8 42%,
            #747474 100%
        );
}


/* =========================================================
   CONTROL TEXT
   ========================================================= */

.play-state {
    color: #eeeeee;

    text-shadow:
        0 1px 0 #000000;
}

.volume-icon {
    color: #dedede;
}

.volume-value {
    color: #e2e2e2;
}


/* =========================================================
   VOLUME SLIDER
   ========================================================= */

.volume-control input[type="range"] {
    height: 6px;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #eeeeee 0%,
            #8c8c8c 45%,
            #454545 55%,
            #bcbcbc 100%
        );

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, 0.65),

        0 1px 0
        rgba(255, 255, 255, 0.18);

    cursor: pointer;
}


/* Chrome slider thumb — Chrome / Edge */

.volume-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    border:
        1px solid
        #6c6c6c;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #e2e2e2 24%,
            #949494 58%,
            #eeeeee 78%,
            #666666 100%
        );

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.85),

        0 0 5px
        rgba(255, 255, 255, 0.25);
}


/* Chrome slider thumb — Firefox */

.volume-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    border:
        1px solid
        #6c6c6c;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #e2e2e2 24%,
            #949494 58%,
            #eeeeee 78%,
            #666666 100%
        );

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.85);
}


/* =========================================================
   EMBED COPY BUTTON
   ========================================================= */

.copy-embed-button {
    color: #080808;

    border:
        2px solid
        #747474;

    background:
        linear-gradient(
            180deg,

            #ffffff 0%,
            #f5f5f5 18%,
            #d8d8d8 38%,

            #9a9a9a 49%,
            #5c5c5c 52%,

            #777777 68%,
            #a8a8a8 84%,
            #555555 100%
        );

    box-shadow:
        inset 0 2px 2px
        rgba(255, 255, 255, 1),

        inset 0 -3px 4px
        rgba(0, 0, 0, 0.55),

        inset 0 0 8px
        rgba(255, 255, 255, 0.20),

        0 0 0 2px
        rgba(15, 15, 15, 0.95),

        0 0 10px
        rgba(220, 220, 220, 0.25);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.50);
}

.copy-embed-button:hover,
.copy-embed-button:focus {
    border-color: #cfcfcf;

    background:
        linear-gradient(
            180deg,

            #ffffff 0%,
            #ffffff 18%,
            #e5e5e5 38%,

            #ababab 49%,
            #696969 52%,

            #858585 68%,
            #b8b8b8 84%,
            #626262 100%
        );

    box-shadow:
        inset 0 2px 2px
        rgba(255, 255, 255, 1),

        inset 0 -3px 4px
        rgba(0, 0, 0, 0.50),

        0 0 0 2px
        rgba(20, 20, 20, 0.95),

        0 0 15px
        rgba(235, 235, 235, 0.38);
}

.copy-embed-button:active {
    transform: translateY(1px);
}