video {
    &,
    &.card {
        background: black;
    }

    // Play/Repeat indicator
    image.circular.large-icons.osd {
    	background:
    	    rgba($SILVER_300, 0.65);
           -gtk-icon-shadow:
                0 1px 2px rgba(black, 0.2),
                0 0.3rem 1rem rgba(black, 0.3);
        color: white;
        padding: 1rem;
    }

    controls.osd {
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(black, 0.1) 1.5rem
        );
        color: white;
        margin: 0;
        padding: 1em;

        > box {
            border-spacing: $button-spacing;

            // Play/pause button
            > button.flat.image-button {
                @extend .osd;

                border-radius: 999px;
            }

            // Volume controls
            > scalebutton > button.toggle {
                -gtk-icon-shadow:
                    0 1px 3px rgba(black, 0.4),
                    0 0 1em rgba(black, 0.25);

                &:checked {
                    background: #{'alpha(shade(@accent_color, 0.85), 0.5)'};
                    color: #{'mix(shade(@accent_color, 1.1), white, 0.75)'};
                }
            }

            box.horizontal {
                border-spacing: $button-spacing;

                // Time labels
                > label {
                    @extend .numeric;
                    font-weight: bold;
                    text-shadow:
                        0 1px 3px rgba(black, 0.4),
                        0 0 1rem rgba(black, 0.25);
                }

                // Playback control
                > scale.horizontal {
                    fill {
                        animation: progress 1.5s easing() infinite;
                        background-color: rgba(white, 0.15);
                        background-repeat: no-repeat;
                        background-size: 48px 100%;
                        background-image:
                            linear-gradient(
                                to right,
                                rgba(white, 0),
                                rgba(white, 0.25) 60%,
                                rgba(white, 0)
                            );

                        &:backdrop {
                            animation: none;
                            background-image: none;
                        }
                    }

                    highlight {
                        background-color: white;
                        box-shadow: 0 1px 3px rgba(black, 0.1);
                    }

                    trough {
                        background-color: rgba(white, 0.25);
                        box-shadow:
                            0 1px 1px rgba(black, 0.075),
                            0 0.2rem 1rem -0.15rem rgba(black, 0.1);
                    }

                    slider {
                        min-width: rem(3px);
                        opacity: 0;
                    }

                    &:hover slider {
                        opacity: 1;
                    }
                }
            }
        }
    }

    @keyframes progress {
        from {
            background-position: calc(0% - 48px), 0%;
        }

        to {
            background-position: calc(100% + 48px), 0%;
        }
    }
}
