/* CSS for custom video elements */

.custom-video-controls {
    --padding: .25rem;
    position: absolute;
    bottom: var(--padding);
    right: var(--padding);
    display: flex;
    align-items: center;
    gap: var(--padding);
}

.custom-video-control-btn {
    --size: 2rem;
    --border-size: calc(.075 * var(--size));
    --font-size: calc(.4 * var(--size));
    border: var(--border-size) solid black;
    color: black;
    background-color: white;
    border-radius: 10rem;
    width: var(--size);
    height: var(--size);
    font-size: var(--font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .5;
    transition: opacity .15s ease-in-out;
}

*:hover>.custom-video-controls .custom-video-control-btn,
.custom-video-control-btn:hover {
    opacity: 1;
}

.custom-video-control-btn:focus-visible {
    outline: var(--border-size) dotted red;
    opacity: 1;
}

/* show the appropriate icon based on the state */
[data-video-function=pause][data-video-state=pause] .icon-pause {
    display: none;
}

[data-video-function=pause][data-video-state=play] .icon-play {
    display: none;
}

@media screen and (min-width: 546px) {
    .custom-video-controls {
        --padding: .5rem;
    }

    .custom-video-control-btn {
        --size: 2.5rem;
    }
}