/* ==========================================================================
   Desktop Screenshot
   ========================================================================== */

.desktop-screenshot {
    border-radius: 6px 6px 4px 4px;                    /* Must be same as browser-frame and img/video */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06),         /* border */
                0 10px 40px -20px rgba(0, 0, 0, 0.25),
                0 20px 60px -25px rgba(0, 0, 0, 0.2),
                0 20px 20px -30px rgba(0, 0, 0, 0.1),
                0 40px 30px -40px rgba(0, 0, 0, 0.2),
                0 60px 40px -50px rgba(0, 0, 0, 0.1),
                0 16px 32px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    opacity: 0;
    transform: scale(.98);
    transform-origin: 50% 20%;
    transition: opacity, transform .6s;
}

.print .desktop-screenshot {
    box-shadow: none;
    border: 1px solid #ddd;
    overflow: visible;
}

.dark .desktop-screenshot {
    box-shadow: none;
}

.desktop-screenshot.LOADED {
    transform: none;
    opacity: 1;
}



/* ==========================================================================
   Browser Frame
   ========================================================================== */

.desktop-screenshot__browser-frame {
    background: #e5e5e5;
    padding: 0 9px;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 6px 6px 0 0; /* Must be same as wrapper */
}

.desktop-screenshot.dark .desktop-screenshot__browser-frame {
    background: #555;
}



/* ==========================================================================
   Browser Frame Button
   ========================================================================== */

.desktop-screenshot__browser-frame-button {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .12);
    margin: 0 2px;
}

.desktop-screenshot__browser-frame-button:nth-child(1) {
    background-color: #FF6058;
}

.desktop-screenshot__browser-frame-button:nth-child(2) {
    background-color: #FFBE2F;
}

.desktop-screenshot__browser-frame-button:nth-child(3) {
    background-color: #27CA41;
}



/* ==========================================================================
   img, video
   ========================================================================== */

.desktop-screenshot img,
.desktop-screenshot video {
    display: block;
    width: 100%;
    border-radius: 0 0 4px 4px; /* Must be same as wrapper */
}