html {}

body>section {
    margin: 1rem;
}

#videos {
    display: grid;
    gap: 1rem;
    /*
    https://css-tricks.com/intrinsically-responsive-css-grid-with-minmax-and-min/
    This does not work in Chrome yet. Version 78.0.3904.97 (Official Build) (64-bit)
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    */
}

/*
#videos > details {
    margin: 0;
    background-color: black;
    color: #aaa;
}
#videos > details > summary {
    color: inherit;
    background-color: transparent;
}
#videos > details > div {
    background-color: white;
    background-color: var(--popup-bg-Backround);
    padding: 1rem;
    xmax-width: 800px;
    xwidth: 90vw;
    margin-bottom: 1rem;
}
#videos > div > h2 {
    margin-bottom: 0;
}
*/

/* ----------------------- Videos ------------ */
.videos-list-item {
    padding: 10px;
    margin-bottom: 5px;
}


/*
.videos-list-item .video-title {
    color: #836643;
}
.videos-list-item .video-time {
    color: #a0a0a0;
}
*/

.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 350px));
    gap: 0.5rem;
}

.videos-list-item p.video-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.videos-list-item .video-title {
    padding-top: 0;
}

/* https://css-tricks.com/aspect-ratio-boxes/ */
.videos-list-item .video-image {
    display: inline-block;
    height: 0px;
    overflow: hidden;
    padding-top: calc(56.25%);
    width: 100%;
    background-size: cover;
}

.videos-list-item .popup-button {
    padding: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.videos-list-item .caption-buttons {
    xheight: 1.5rem;
    /* FIXME: for mobile, does not work when doing feedback */
    padding: 0px;
}

#videos ul {
    list-style: none;
    padding: 0;
}

#videos ul li {}


button.shared.share-button {
    color: orangered;
}
.theme-light button.shared.share-button {
    color: hsl(16, 100%, 40%);
}

button.share-button span.to-be-or-not > span {
    display: none;
}
button.shared.share-button span.to-be-or-not > span.is-shared {
    display: inline;
}
button:not(.shared).share-button span.to-be-or-not > span.not-shared {
    display: inline;
}

.load-type-label {
    padding: 4px 1rem;
}