/* global settings */

@import 'range-style.css';

:root {
    --background: black;
    --background-other: rgba(255,255,255,0.15);
    --backdrop: rgba(0, 0, 0, 0.7);
    --foreground: white;
    --highlight: #9BB2CE;
    --spotlight: #EB7125;
    --fade: #a4a4a4;
    --fade-other: #ababab;

    --gap: 3px;
    --svg-size: calc(var(--gap) * 8);
    --controls-height: calc(var(--gap) * 10);
    --progress-height: calc(var(--gap) * 2);
    --controls-fullheight: calc(var(--progress-height)
                                + var(--gap) * 4
                                + var(--controls-height));

    --main-width: 100vw;
    --main-height: 75vh;
    --secondary-width: calc((100vw - var(--gap) * 2) / 3);
    --secondary-height: calc(25vh - var(--gap));

    --font: verdana, sans-serif;
}

svg {
    height: var(--svg-size);
    width: var(--svg-size);
    fill: var(--foreground);
}
button {
    background: none;
    border: none;
    color: var(--foreground);
}

/* passive element styles */

/** general layout **/

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    position: relative;
    display: grid;
    background-color: var(--background);
    color: var(--foreground);
    place-items: center;
    font-family: var(--font);
}

#wrapper {
    display: grid;
    grid-gap: var(--gap);
    gap: var(--gap);
}

/** about box **/

#about {
    display: grid;
    grid-template-areas: "button title" "playlist playlist";
    grid-template-rows: 3rem;
    align-items: start;
    justify-items: start;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--backdrop);
    /*padding-right: calc(var(--gap) * 6);*/
}
#playlist-button, #title, #playlist-title {
    padding: calc(var(--gap) * 4);
    margin: 0;
    font-size: 120%;
    place-self: stretch;
}
#playlist-button {
    grid-area: button;
    width: 3rem;
}
#title {
    grid-area: title;
}
#playlist {
    grid-area: playlist;
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 100%;
    margin-bottom: var(--controls-fullheight);
}
.playlist-item a {
    /*background: var(--background);*/
    /*margin: var(--gap);*/
    padding: calc(var(--gap)*3);
    /*padding-right: calc(var(--gap) * 10);*/
    /*border: var(--gap) solid var(--fade);*/
    color: var(--foreground);
    display: grid;
    grid-template-areas: "thumb title" "thumb description";
    grid-template-columns: 290px auto;
    justify-items: start;
    /*display: flex;*/
    /*align-items: center;*/
    text-decoration: none;
}
.playlist-item img {
    width: 100%;
    height: auto;
    margin: var(--gap);
    border: 1px solid var(--fade);
    grid-area: thumb;
}
.playlist-item span {
    margin: calc(var(--gap) * 3);
    max-width: 30vw;
}
.playlist-item span.title {
    grid-area: title;
    align-self: end;
    font-size: 110%;
}
.playlist-item span.desc {
    grid-area: description;
    align-self: start;
}
.current a {
    background-color: var(--background-other);
    /*color: var(--fade-other);*/
}

/** control box **/

#controls {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    display: grid;
    grid-row-gap: var(--gap);
    row-gap: var(--gap);
    grid-template-areas: "progress progress progress" "left center right";
    grid-template-columns: 1fr 24px 1fr;
}
#controls button {
    padding: 0 calc(var(--gap) * 2);
}
#controls button,
#controls span {
    font-size: 100%;
}
#controls button,
#controls input {
    margin: 0;
    height: var(--controls-height);
}
#progress-container {
    position: relative;
    grid-area: progress;
    margin: 0 calc(var(--gap) * 3);
    height: calc(var(--progress-height) + var(--gap) * 2);
    opacity: 60%;
}
#buffer, #progress {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--progress-height);
}
#buffer {
    background-color: var(--fade);
    width: 100%;
    z-index: 1;
}
#progress {
    background-color: var(--spotlight);
    z-index: 2;
}
#progress-popup {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -150%);
    background: var(--background);
    border-radius: var(--gap);
    padding: var(--gap);
    visibility: hidden;
    opacity: 0;
    user-select: none;
}
.control-box {
    display: flex;
    align-items: stretch;
    height: var(--controls-height);
    background-color: var(--backdrop);
}
.control-box > * {
    display: flex;
    align-items: center;
    justify-content: center;
}
#left-controls {
    grid-area: left;
}
#center-controls {
    grid-area: center;
    justify-content: center;
}
#right-controls {
    grid-area: right;
    justify-content: flex-end;
}
.select {
    position: relative;
    user-select: none;
}
.list {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: var(--controls-height);
    padding-bottom: var(--gap);
    list-style: none;
}
.list li {
    background-color: var(--fade);
}
.list li:nth-child(2n) {
    background-color: var(--fade-other);
}
.list button {
    text-align: right;
    width: 100%;
}
#speed-select button::after {
    content: "x";
}
#resolution-select button::after {
    content: "p";
}
#volume {
    width: 0;
    visibility: hidden;
}
#elapsed,
#duration {
    padding: 0 var(--gap);
}

/** video streams **/

.stream {
    display: grid;
    align-items: center;
    justify-items: center;
}
.stream > video {
    grid-row: 1 / 4;
    grid-column: 1 / 4;
}
.stream > svg {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: auto;
    width: auto;
}
.fade {
    opacity: 0;
}
.main {
    position: relative;
    grid-row: 2 / 5;
    grid-column: 1 / 4;
}
.secondary {
    grid-row-start: 1;
}
.main > video {
    max-height: var(--main-height);
    max-width: var(--main-width);
}
.secondary > video {
    max-height: var(--secondary-height);
    max-width: var(--secondary-width);
}
.main > svg {
    max-height: calc(var(--main-height) / 3);
    max-width: calc(var(--main-height) / 3);
}
.secondary > svg {
    max-height: calc(var(--secondary-height) / 3);
    max-width: calc(var(--secondary-height) / 3);
}

/** subtitles **/
video::cue {
    background-color: var(--backdrop);
}

/** wide screens **/

@media screen and (min-aspect-ratio: 16/9) {
    :root {
        --main-width: 75vw;
        --main-height: 100vh;
        --secondary-width: calc(25vw - var(--gap));
        --secondary-height: calc((100vh - var(--gap) * 2) / 3);
    }
    .main {
        grid-row: 1 / 4;
        grid-column: 1 / 4;
    }
    .secondary {
        grid-row-start: initial;
        grid-column-start: 4;
    }
}

/* dynamic changes */

:focus {
    outline: 2px solid var(--highlight);
}

/** element hiding **/

.invisible {
    visibility: hidden;
    opacity: 0;
}
.hidden {
    display: none !important;
}
.nocursor {
    cursor: none;
}

.nocursor .fade {
    opacity: 0 !important;
}
.nocursor #controls,
.nocursor #about {
    max-height: 0;
    overflow-y: hidden;
}

/** element showing **/

#about.expand {
    height: 100vh;
    grid-template-columns: 3rem auto;
}
#about.expand #playlist {
    display: flex;
    margin-bottom: var(--controls-fullheight);
    place-self: stretch;
}
.stream:hover > .fade {
    opacity: 80%;
}
#progress-container:hover,
#progress-container:focus-within {
    opacity: 100%;
}
#progress-container:hover #progress-popup,
#progress-container:focus-within #progress-popup {
    visibility: visible;
    opacity: 100%;
}
#progress-container:hover #progress::after,
#progress-container:focus-within #progress::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -25%);
    border: var(--progress-height) solid var(--spotlight);
    border-radius: var(--progress-height);
}
.select:focus-within .list,
.select:hover .list {
    visibility: initial;
    opacity: 100%;
}
#volume-button:hover + #volume,
#volume-button:focus + #volume,
#volume:hover,
#volume:focus-within {
    width: 5rem;
    visibility: initial;
}

/** highlighting **/

svg:hover,
svg:focus,
*:hover > svg,
*:focus > svg {
    fill: var(--highlight);
}
/* override highlight for non-interactive icons */
.no-highlight:hover,
*:hover > .no-highlight {
    fill: var(--foreground);
}

.playlist-item a:hover {
    /*border-color: var(--highlight);*/
    background-color: rgba(255,255,255,0.2);
    /*color: var(--highlight);*/
    color: inherit;
}
.playlist-item a:hover img {
    border-color: var(--highlight);
}
.select:focus-within .current,
.select:hover .current {
    color: var(--highlight);
}
.list button:hover,
.list button:focus {
    background-color: var(--highlight);
}

/** transition settings **/

.fade {
    transition: opacity 0.5s;
}

#about,
#controls {
    transition: max-height 0.5s;
    max-height: 100vh;
}
#progress-container {
    transition: opacity 0.5s;
}
#progress-popup {
    transition: opacity 0.5s, visibility 0.5s;
}
.list {
    transition: opacity 0.5s, visibility 0.5s;
}
#volume {
    transition: width 0.5s, visibility 0.5s;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #424242
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background-color: #424242
}

::-webkit-scrollbar-thumb {
    background-color: #8e8e8e;
    border: 1px solid #424242;
    border-radius: 5px
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
}