@layer mantine, theme, base, components, utilities;
.ThemeSwitch__root{border:1px solid var(--border);border-radius:9999px;outline:none;gap:.125rem;padding:.125rem;display:flex}.ThemeSwitch__root:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent)}.ThemeSwitch__sun,.ThemeSwitch__moon{border:1px solid #0000;border-radius:9999px;padding:.125rem;display:block}.ThemeSwitch__sun{transition:all .15s cubic-bezier(.4,0,.2,1)}.ThemeSwitch__sun>svg>path{transition:transform .2s cubic-bezier(.4,0,.2,1)}.ThemeSwitch__sun>svg>circle{fill:#0000;transition:color .5s cubic-bezier(.4,0,.2,1),fill .5s cubic-bezier(.4,0,.2,1)}.ThemeSwitch__moon{transition:transform .5s cubic-bezier(.4,0,.2,1);transform:translateZ(0)}.ThemeSwitch__sun[data-active],.ThemeSwitch__moon[data-active]{border-color:var(--border);background-color:var(--muted)}.ThemeSwitch__moon[data-active]>svg>path{fill:#fff;stroke:#0000}.ThemeSwitch__root[data-mode=light] .ThemeSwitch__moon>svg>path{stroke:currentColor}.ThemeSwitch__root[data-mode=light]:hover .ThemeSwitch__moon{transform:rotate(-10deg)}.ThemeSwitch__root[data-mode=dark]:hover .ThemeSwitch__sun{transform:rotate(15deg)}.ThemeSwitch__root[data-mode=dark]:hover .ThemeSwitch__sun>svg>path{transform:scale(1.1)translate(-1px,-1px)}