/*
 * Source-faithful web port of ToggleButtonGorgeousThemeSwitchStyle.
 * Original WPF control uses a 100 x 40 internal viewport, a nested moon
 * translated inside the clipped sun, and independent cloud/star/glow
 * storyboards. The existing app remains responsible for body.dark and state.
 */

:root {
  --source-theme-power-in-out: cubic-bezier(.45, 0, .55, 1);
  --source-theme-power-out: cubic-bezier(.22, 1, .36, 1);
}

[data-theme],
[data-admin-theme] {
  position: relative !important;
  width: 100px !important;
  min-width: 100px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: transparent !important;
  box-shadow: none !important;
}

.source-theme-track {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100px !important;
  height: 40px !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-radius: 20px !important;
  background: #4685c0 !important;
  color: transparent !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, .22),
    inset 0 -2px 5px rgba(20, 47, 77, .35) !important;
  contain: paint;
}

.source-theme-outline {
  position: absolute;
  inset: -2px;
  z-index: 20;
  border: 1.8px solid #5c6170;
  border-radius: 21px;
  opacity: 1;
  pointer-events: none;
  box-shadow: 0 0 7px rgba(0, 0, 0, .48);
}

.source-theme-stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateY(-36px);
  pointer-events: none;
}

.source-theme-star {
  position: absolute;
  display: block;
  width: var(--star-size, 3px);
  height: var(--star-size, 3px);
  left: var(--star-x, 0);
  top: var(--star-y, 0);
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .82));
  transform: scale(1);
  transform-origin: 50% 50%;
}

.source-theme-cloud {
  position: absolute;
  z-index: 3;
  display: block;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(96, 119, 145, .18));
}

.source-theme-cloud-one {
  left: 2px;
  top: 2px;
  width: 101px;
  height: 47px;
  transform: translateY(0);
}

.source-theme-cloud-two {
  left: 2px;
  top: 8px;
  width: 100px;
  height: 40px;
  transform: translateY(0);
}

.source-theme-glow {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  display: block;
  width: var(--glow-size);
  height: var(--glow-size);
  margin-top: calc(var(--glow-size) / -2);
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--glow-alpha));
  transform: translateX(0);
  pointer-events: none;
}

.source-theme-glow-one { --glow-size: 79px; --glow-alpha: .067; }
.source-theme-glow-two { --glow-size: 67px; --glow-alpha: .133; }
.source-theme-glow-three { --glow-size: 55px; --glow-alpha: .133; }

.source-theme-thumb {
  position: absolute;
  left: 0;
  top: 1px;
  z-index: 8;
  display: block;
  width: 36px;
  height: 38px;
  border-radius: 20px;
  transform: translateX(4px);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.source-theme-thumb-shadow {
  position: absolute;
  left: 0;
  top: 2.5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0 66%, rgba(0, 0, 0, .9) 100%);
}

.source-theme-sun {
  position: absolute;
  left: 0;
  top: 2.5px;
  display: block;
  width: 33px;
  height: 33px;
  overflow: hidden;
  border-radius: 50%;
  background: #f3c62b;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform .7s var(--source-theme-power-in-out);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, .7),
    inset -2px -2px 3px rgba(146, 92, 0, .16);
}

.source-theme-sun::before,
.source-theme-sun::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: 31px;
  height: 17px;
  border-radius: 50%;
  pointer-events: none;
}

.source-theme-sun::before {
  left: -5px;
  top: -5px;
  transform: rotate(2deg);
  border-top: 3px solid rgba(255, 255, 255, .84);
  opacity: .78;
}

.source-theme-sun::after {
  right: -6px;
  bottom: -5px;
  transform: rotate(12deg);
  border-bottom: 4px solid rgba(0, 0, 0, .2);
}

.source-theme-moon {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: #c4c9d4;
  transform: translateX(34px);
  filter: drop-shadow(0 2px 4px rgba(128, 128, 128, .8));
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, .75),
    inset -2px -2px 3px rgba(64, 69, 88, .22);
}

.source-theme-crater {
  position: absolute;
  display: block;
  border: .6px solid rgba(0, 0, 0, .4);
  border-radius: 50%;
  background: #9a9fb2;
}

.source-theme-crater-one { left: 6px; top: 14px; width: 10px; height: 10px; }
.source-theme-crater-two { left: 13px; top: 5px; width: 6px; height: 6px; }
.source-theme-crater-three { left: 20px; top: 18px; width: 7px; height: 7px; }

.source-theme-highlight {
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: 50%;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .44), transparent 62%);
  transition: opacity .5s var(--source-theme-power-in-out);
}

[data-theme]:hover .source-theme-sun,
[data-admin-theme]:hover .source-theme-sun {
  transform: rotate(30deg);
  transition-duration: .6s;
}

[data-theme]:hover .source-theme-highlight,
[data-admin-theme]:hover .source-theme-highlight { opacity: 1; }

/* Stable end states after each storyboard has finished. */
[data-theme].is-dark .source-theme-track,
[data-admin-theme].is-dark .source-theme-track { background: #171e33 !important; }

[data-theme].is-dark .source-theme-thumb,
[data-admin-theme].is-dark .source-theme-thumb { transform: translateX(63px); }

[data-theme].is-dark .source-theme-moon,
[data-admin-theme].is-dark .source-theme-moon { transform: translateX(0); }

[data-theme].is-dark .source-theme-stars,
[data-admin-theme].is-dark .source-theme-stars { transform: translateY(0); }

[data-theme].is-dark .source-theme-cloud-one,
[data-admin-theme].is-dark .source-theme-cloud-one { transform: translateY(34px); }

[data-theme].is-dark .source-theme-cloud-two,
[data-admin-theme].is-dark .source-theme-cloud-two { transform: translateY(26px); }

[data-theme].is-dark .source-theme-glow-one,
[data-admin-theme].is-dark .source-theme-glow-one { transform: translateX(21px); }

[data-theme].is-dark .source-theme-glow-two,
[data-admin-theme].is-dark .source-theme-glow-two { transform: translateX(33px); }

[data-theme].is-dark .source-theme-glow-three,
[data-admin-theme].is-dark .source-theme-glow-three { transform: translateX(45px); }

/* WPF StoryboardChecked: each layer retains its original duration. */
.source-theme-to-dark .source-theme-track { animation: sourceThemeTrackDark .6s var(--source-theme-power-out) both; }
.source-theme-to-dark .source-theme-thumb { animation: sourceThemeThumbDark 1.5s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-moon { animation: sourceThemeMoonDark 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-stars { animation: sourceThemeStarsDark 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-cloud-one { animation: sourceThemeCloudOneDark .6s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-cloud-two { animation: sourceThemeCloudTwoDark .6s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-glow-one { animation: sourceThemeGlowOneDark 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-glow-two { animation: sourceThemeGlowTwoDark 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-glow-three { animation: sourceThemeGlowThreeDark 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-dark .source-theme-star-one { animation: sourceThemeTwinkleOne 2.5s linear both; }
.source-theme-to-dark .source-theme-star-two { animation: sourceThemeTwinkleTwo 2.8s linear both; }
.source-theme-to-dark .source-theme-star-three { animation: sourceThemeTwinkleThree 3.1s linear both; }
.source-theme-to-dark .source-theme-star-four { animation: sourceThemeTwinkleFour 3.3s linear both; }
.source-theme-to-dark .source-theme-star-five { animation: sourceThemeTwinkleFive 3.6s linear both; }

/* WPF StoryboardUnChecked: clouds rise, overshoot and settle independently. */
.source-theme-to-light .source-theme-track { animation: sourceThemeTrackLight .7s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-thumb { animation: sourceThemeThumbLight 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-moon { animation: sourceThemeMoonLight .6s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-stars { animation: sourceThemeStarsLight .6s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-cloud-one { animation: sourceThemeCloudOneLight 3.6s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-cloud-two { animation: sourceThemeCloudTwoLight 2.8s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-glow-one { animation: sourceThemeGlowOneLight 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-glow-two { animation: sourceThemeGlowTwoLight 1.3s var(--source-theme-power-in-out) both; }
.source-theme-to-light .source-theme-glow-three { animation: sourceThemeGlowThreeLight 1.3s var(--source-theme-power-in-out) both; }

@keyframes sourceThemeTrackDark {
  from { background: #4685c0; }
  to { background: #171e33; }
}

@keyframes sourceThemeTrackLight {
  from { background: #171e33; }
  to { background: #4685c0; }
}

@keyframes sourceThemeThumbDark {
  0% { transform: translateX(4px); }
  40% { transform: translateX(66px); }
  100% { transform: translateX(63px); }
}

@keyframes sourceThemeThumbLight {
  0% { transform: translateX(63px); }
  46.1538% { transform: translateX(2px); }
  100% { transform: translateX(4px); }
}

@keyframes sourceThemeMoonDark {
  0% { transform: translateX(34px); }
  46.1538% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

@keyframes sourceThemeMoonLight {
  from { transform: translateX(0); }
  to { transform: translateX(34px); }
}

@keyframes sourceThemeStarsDark {
  0% { transform: translateY(-36px); }
  46.1538% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes sourceThemeStarsLight {
  from { transform: translateY(0); }
  to { transform: translateY(-36px); }
}

@keyframes sourceThemeCloudOneDark {
  from { transform: translateY(0); }
  to { transform: translateY(34px); }
}

@keyframes sourceThemeCloudTwoDark {
  from { transform: translateY(0); }
  to { transform: translateY(26px); }
}

@keyframes sourceThemeCloudOneLight {
  0% { transform: translateY(34px); }
  16.6667% { transform: translateY(-6px); }
  66.6667% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

@keyframes sourceThemeCloudTwoLight {
  0% { transform: translateY(26px); }
  21.4286% { transform: translateY(-4px); }
  64.2857% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes sourceThemeGlowOneDark {
  0% { transform: translateX(0); }
  46.1538% { transform: translateX(23px); }
  100% { transform: translateX(21px); }
}

@keyframes sourceThemeGlowTwoDark {
  0% { transform: translateX(0); }
  46.1538% { transform: translateX(35px); }
  100% { transform: translateX(33px); }
}

@keyframes sourceThemeGlowThreeDark {
  0% { transform: translateX(0); }
  46.1538% { transform: translateX(47px); }
  100% { transform: translateX(45px); }
}

@keyframes sourceThemeGlowOneLight {
  0% { transform: translateX(21px); }
  46.1538% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes sourceThemeGlowTwoLight {
  0% { transform: translateX(33px); }
  46.1538% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes sourceThemeGlowThreeLight {
  0% { transform: translateX(45px); }
  46.1538% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes sourceThemeTwinkleOne {
  0%, 52% { transform: scale(1); }
  76% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes sourceThemeTwinkleTwo {
  0%, 57.1429% { transform: scale(1); }
  78.5714% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes sourceThemeTwinkleThree {
  0%, 64.5161% { transform: scale(1); }
  80.6452% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes sourceThemeTwinkleFour {
  0%, 66.6667% { transform: scale(1); }
  81.8182% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes sourceThemeTwinkleFive {
  0%, 72.2222% { transform: scale(1); }
  83.3333% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* WPF AnimationHelper uses a 600 ms PowerEase theme-color transition. */
body {
  transition:
    background-color .6s var(--source-theme-power-in-out),
    color .6s var(--source-theme-power-in-out);
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none !important; }

  [data-theme] .source-theme-track *,
  [data-admin-theme] .source-theme-track *,
  [data-theme] .source-theme-track,
  [data-admin-theme] .source-theme-track {
    animation: none !important;
    transition: none !important;
  }
}