/* Match the theme's button styling */
#presentation-mode-toggle {
    display: inline-block;
    transition: var(--transition);
    box-shadow: var(--edge-highlight);
    border-radius: 999px;
    background-color: var(--fg-muted-1);
    padding: 0.5rem;
    color: var(--fg-muted-4);
    line-height: 0;
}

#presentation-mode-toggle:hover {
    background-color: var(--fg-muted-2);
    color: var(--fg-muted-5);
}

#presentation-mode-toggle:active {
    transform: var(--active);
}

/* Presentation Mode Toggle Icon */
#presentation-mode-toggle .icon {
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

body.presentation-mode #presentation-mode-toggle {
    color: var(--accent-color, #9a9996);
}

/* Dim all content children when presentation mode is active */
body.presentation-mode article > *:not(#banner-container):not(#heading):not(#buttons-container):not(nav):not(hr):not(.active-element) {
    opacity: 0.2;
    filter: blur(3px);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

/* Bring the active element into focus */
body.presentation-mode article > *.active-element {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.02);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
    z-index: 10;
    position: relative;
}