/* Loaded only in the Christmas themes (index.html, themeInterop.js), so every rule here must be scoped
   to them. The always-loaded rule that hides the decorations, and keeps them decorative, is in layout.css. */

/* ---------- Winter night: fairy lights hanging from the header ---------- */
body.material-dark.winter-night .rz-header {
    position: relative;
}

body.material-dark.winter-night .rz-header .sm-xmas-lights {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 22px;
    z-index: 3;
    overflow: hidden;
}

body.material-dark.winter-night .sm-xmas-lights > span {
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: 120px 22px;
}

body.material-dark.winter-night .sm-xmas-lights-wire {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 4 Q60 14 120 4' fill='none' stroke='%2346607f' stroke-width='1.4'/%3E%3C/svg%3E");
}

body.material-dark.winter-night .sm-xmas-lights-bulbs--one {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cellipse cx='20' cy='15.8' rx='7' ry='8' fill='%23ff5c6c' opacity='.22'/%3E%3Crect x='18' y='6.3' width='4' height='3.5' rx='1' fill='%236f86a3'/%3E%3Cellipse cx='20' cy='14.3' rx='3.4' ry='4.6' fill='%23ff5c6c'/%3E%3Cellipse cx='18.9' cy='12.8' rx='.9' ry='1.4' fill='%23ffffff' opacity='.7'/%3E%3Cellipse cx='80' cy='17.4' rx='7' ry='8' fill='%23f2c14e' opacity='.22'/%3E%3Crect x='78' y='7.9' width='4' height='3.5' rx='1' fill='%236f86a3'/%3E%3Cellipse cx='80' cy='15.9' rx='3.4' ry='4.6' fill='%23f2c14e'/%3E%3Cellipse cx='78.9' cy='14.4' rx='.9' ry='1.4' fill='%23ffffff' opacity='.7'/%3E%3C/svg%3E");
    animation: sm-xmas-twinkle 2.8s ease-in-out infinite;
}

body.material-dark.winter-night .sm-xmas-lights-bulbs--two {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cellipse cx='50' cy='17.9' rx='7' ry='8' fill='%234fd1a1' opacity='.22'/%3E%3Crect x='48' y='8.4' width='4' height='3.5' rx='1' fill='%236f86a3'/%3E%3Cellipse cx='50' cy='16.4' rx='3.4' ry='4.6' fill='%234fd1a1'/%3E%3Cellipse cx='48.9' cy='14.9' rx='.9' ry='1.4' fill='%23ffffff' opacity='.7'/%3E%3Cellipse cx='110' cy='14.5' rx='7' ry='8' fill='%236db7ff' opacity='.22'/%3E%3Crect x='108' y='5.0' width='4' height='3.5' rx='1' fill='%236f86a3'/%3E%3Cellipse cx='110' cy='13.0' rx='3.4' ry='4.6' fill='%236db7ff'/%3E%3Cellipse cx='108.9' cy='11.5' rx='.9' ry='1.4' fill='%23ffffff' opacity='.7'/%3E%3C/svg%3E");
    animation: sm-xmas-twinkle 2.8s ease-in-out infinite;
    animation-delay: -1.4s;
}

/* ---------- Winter night: snow falling behind the sidebar menu ---------- */
body.material-dark.winter-night .app-sidebar .sm-xmas-snow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    contain: strict;
}

body.material-dark.winter-night .sm-xmas-flake {
    position: absolute;
    top: -8px;
    width: var(--sm-xmas-flake-size);
    height: var(--sm-xmas-flake-size);
    border-radius: 50%;
    background: var(--sm-winter-snow);
    opacity: .5;
    animation: sm-xmas-fall linear infinite;
}

/* ---------- Candy cane: baubles swinging from the top of the sidebar ---------- */
body.material.candy-cane .app-sidebar .sm-xmas-baubles {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    contain: strict;
}

body.material.candy-cane .sm-xmas-bauble {
    --sm-xmas-bauble-size: 20px;
    --sm-xmas-bauble-drop: 110px;
    position: absolute;
    top: 0;
    width: var(--sm-xmas-bauble-size);
    transform-origin: 50% 0;
    animation: sm-xmas-swing 4.6s ease-in-out infinite;
}

body.material.candy-cane .sm-xmas-bauble--berry {
    right: 6px;
    --sm-xmas-bauble-color: #ff7a8c;
    --sm-xmas-bauble-shade: #c81e3a;
    animation-delay: -.6s;
}

body.material.candy-cane .sm-xmas-bauble--gold {
    --sm-xmas-bauble-size: 16px;
    --sm-xmas-bauble-drop: 178px;
    right: 24px;
    --sm-xmas-bauble-color: #ffe08a;
    --sm-xmas-bauble-shade: #d39a17;
    animation-delay: -2.1s;
}

body.material.candy-cane .sm-xmas-bauble--pine {
    --sm-xmas-bauble-drop: 64px;
    right: 38px;
    --sm-xmas-bauble-color: #5fc79a;
    --sm-xmas-bauble-shade: #1f7a53;
    animation-delay: -3.3s;
}

body.material.candy-cane .sm-xmas-bauble > span {
    display: block;
    margin: 0 auto;
}

body.material.candy-cane .sm-xmas-bauble-string {
    width: 1px;
    height: var(--sm-xmas-bauble-drop);
    background: #c9d2cd;
}

body.material.candy-cane .sm-xmas-bauble-cap {
    width: 8px;
    height: 5px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(#e7c35c, #b88a1d);
}

body.material.candy-cane .sm-xmas-bauble-ball {
    position: relative;
    width: var(--sm-xmas-bauble-size);
    height: var(--sm-xmas-bauble-size);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--sm-xmas-bauble-color), var(--sm-xmas-bauble-shade));
    box-shadow: 0 3px 6px rgba(34, 48, 43, 0.18);
}

body.material.candy-cane .sm-xmas-bauble-ball::after {
    content: "";
    position: absolute;
    left: 24%;
    top: 18%;
    width: 28%;
    height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

/* ---------- Scenery at the top of the sidebar footer (expanded sidebar only) ---------- */
body.material-dark.winter-night .app-sidebar:not(.collapsed) .sm-xmas-scenery,
body.material.candy-cane .app-sidebar:not(.collapsed) .sm-xmas-scenery {
    display: block;
    height: 56px;
    margin-bottom: 4px;
}

body.material-dark.winter-night .app-sidebar:not(.collapsed) .sm-xmas-drift,
body.material.candy-cane .app-sidebar:not(.collapsed) .sm-xmas-gifts {
    display: block;
    width: 100%;
    height: 100%;
}

/* The snowdrift is the divider in Winter night, so the footer line steps aside. */
body.material-dark.winter-night .app-sidebar:not(.collapsed) .sidebar-footer {
    border-top-color: transparent;
}

/* Candy cane's gifts stand on the footer line, so the line moves below them. */
body.material.candy-cane .app-sidebar:not(.collapsed) .sidebar-footer {
    border-top-color: transparent;
}

/* The sidebar menu style strips borders with !important, so this one needs it too. */
body.material.candy-cane .app-sidebar:not(.collapsed) .sidebar-footer-menu {
    border-top: 1px solid #e7ebf2 !important;
}

@keyframes sm-xmas-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

@keyframes sm-xmas-fall {
    to { transform: translate(var(--sm-xmas-flake-drift), 105vh); }
}

@keyframes sm-xmas-swing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Reduced motion: keep the still decorations, drop everything that moves. */
@media (prefers-reduced-motion: reduce) {
    body.material-dark.winter-night .app-sidebar .sm-xmas-snow {
        display: none;
    }

    body.material-dark.winter-night .sm-xmas-lights > span,
    body.material.candy-cane .sm-xmas-bauble {
        animation: none !important;
    }
}