/* ==================== DAY/NIGHT THEME TOGGLE BUTTON ==================== */

.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.theme-toggle-btn {
  --step: 0.5s;
  --ease: linear(
    0 0%,
    0.2342 12.49%,
    0.4374 24.99%,
    0.6093 37.49%,
    0.6835 43.74%,
    0.7499 49.99%,
    0.8086 56.25%,
    0.8593 62.5%,
    0.9023 68.75%,
    0.9375 75%,
    0.9648 81.25%,
    0.9844 87.5%,
    0.9961 93.75%,
    1 100%
  );
  --offset: calc(var(--step) * 0.5);
  
  /* Color constants for button components */
  --button-light: hsl(223 4% 73%);
  --button-dark: hsl(220 27% 10%);
  --glow-color: hsl(182 90% 92%);

  /* Scaled font-size to control overall button size */
  font-size: 10px;
  background: transparent;
  height: 3em;
  padding: 0;
  border-radius: 3em;
  border: 0;
  aspect-ratio: 1.8 / 1;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  z-index: 10;
}

.theme-toggle-btn::after {
  content: '';
}

.theme-toggle-btn :is(.socket, .face) {
  position: absolute;
  border-radius: 3em;
}

/* --- Socket (outer border/well) --- */
.theme-toggle-btn .socket {
  box-shadow: -0.05em 0.1em 0.2em -0.2em rgba(255, 255, 255, 0.5);
  background: hsl(0 0% 90%);
  position: absolute;
  inset: 0;
  transition: background-color var(--step) var(--ease), box-shadow var(--step) var(--ease);
}

[data-theme='dark'] .theme-toggle-btn .socket {
  background: hsl(0 0% 5%);
  box-shadow: -0.025em 0.08em 0.2em -0.1em rgba(255, 255, 255, 0.15);
}

.theme-toggle-btn .socket-shadow {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
  box-shadow: 0em 0.075em 0.1em 0em rgba(255, 255, 255, 0.2);
  transition: opacity var(--step) var(--ease);
}

/* --- Face (moving knob) --- */
.theme-toggle-btn .face {
  inset: 0.15em;
  scale: 1;
  transition: scale var(--step) var(--ease);
}

.theme-toggle-btn:active .socket {
  box-shadow: -0.045em 0.1em 0.2em -0.15em rgba(255, 255, 255, 0.4);
}

.theme-toggle-btn:active .face {
  scale: 0.99;
}

/* --- Face Plate & Shadows --- */
.theme-toggle-btn .face-plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: -0.05em 0.1em 0.2em -0.2em rgba(255, 255, 255, 0.3) inset;
  background: conic-gradient(from 45deg, #0000, rgba(255, 255, 255, 0.05)), var(--button-light);
  transition: background-color var(--step) var(--ease);
}

[data-theme='dark'] .theme-toggle-btn .face-plate {
  background: conic-gradient(from 45deg, #0000, rgba(255, 255, 255, 0.05)), var(--button-dark);
}

.theme-toggle-btn .face-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.theme-toggle-btn .face-shadow::after,
.theme-toggle-btn .face-shadow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity var(--step) var(--ease), translate var(--step) var(--ease), filter var(--step) var(--ease), scale var(--step) var(--ease);
}

.theme-toggle-btn .face-shadow::before {
  background: black;
  opacity: 0.15;
}

.theme-toggle-btn .face-shadow::after {
  background: white;
  scale: 0.5;
  opacity: 0;
}

/* --- Face Glowdrop & Glows --- */
.theme-toggle-btn .face-glowdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  scale: 0;
  transition: scale var(--step) var(--ease);
}

.theme-toggle-btn .face-glowdrop::after,
.theme-toggle-btn .face-glowdrop::before {
  content: '';
  height: 50%;
  aspect-ratio: 1;
  background: #fff;
  filter: blur(6px);
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.theme-toggle-btn .face-glowdrop::before {
  left: 4%;
  width: 56%;
  translate: 0 -25%;
}

.theme-toggle-btn .face-glowdrop::after {
  bottom: 0;
  right: 12%;
  width: 34%;
  translate: 0 20%;
}

.theme-toggle-btn .face-glows {
  position: absolute;
  inset: -0.075em;
  opacity: 0;
  border-radius: inherit;
  mix-blend-mode: plus-lighter;
  filter: blur(8px);
  z-index: 20;
  mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
        conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
  transition: opacity var(--step) var(--ease);
}

.theme-toggle-btn .face-glows div {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(4px);
  border: 0.1em solid white;
}

/* --- Shine effect --- */
.theme-toggle-btn .face-shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 3em;
  transition: opacity var(--step) var(--ease);
}

.theme-toggle-btn .face-shine-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask: conic-gradient(
    from 0deg,
    #fff 90deg,
    #0000 110deg 200deg,
    #fff 215deg 280deg,
    #0000 315deg
  );
  box-shadow: 0.075em 0 0.025em -0.025em rgba(0, 0, 0, 0.3) inset,
              -0.075em -0.05em 0.025em -0.025em rgba(0, 0, 0, 0.3) inset;
}

.theme-toggle-btn .face-shine::before {
  content: '';
  position: absolute;
  inset: 0.05em;
  border-radius: 3em;
  box-shadow: 0 -0.05em 0.025em -0.025em rgba(128, 128, 128, 0.3) inset,
              -0.025em 0.05em 0.025em -0.025em rgba(255, 255, 255, 0.3) inset;
}

.theme-toggle-btn .face-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 45deg, #0000, rgba(255, 255, 255, 0.15));
  border-radius: 3em;
}

/* --- SVG Moon & Icon overlays --- */
.theme-toggle-btn svg.main,
.theme-toggle-btn svg.glow,
.theme-toggle-btn svg.trail-holder {
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -52% -48%;
  overflow: visible !important;
}

.theme-toggle-btn svg path {
  transform-box: fill-box;
  transform-origin: center center;
}

.theme-toggle-btn .glow {
  z-index: 3;
  filter: drop-shadow(0 0 0.2em var(--glow-color));
  will-change: opacity;
  opacity: 1; /* Moon glow is active in dark theme (pressed=false) */
  transition-property: opacity;
  transition-duration: 1.25s;
  transition-delay: var(--offset);
  transition-timing-function: linear(
    0 0%,
    0.0039 6.25%,
    0.0156 12.5%,
    0.0352 18.75%,
    0.0625 25%,
    0.0977 31.25%,
    0.1407 37.5%,
    0.1914 43.74%,
    0.2499 49.99%,
    0.3164 56.25%,
    0.3906 62.5%,
    0.5625 75%,
    0.7656 87.5%,
    1 100%
  );
}

.theme-toggle-btn .glow-path {
  fill: var(--glow-color);
  stroke: var(--glow-color);
  opacity: 1;
  stroke-width: 0px;
}

.theme-toggle-btn .outline {
  stroke: hsl(0 0% 10%);
  fill: black;
  stroke-width: 2px;
  transition: stroke var(--step) var(--ease);
}

.theme-toggle-btn .inner-face {
  fill: hsl(230 5% 80%);
}

.theme-toggle-btn .inner-bg {
  fill: black;
  transition: fill var(--step) var(--ease);
}

/* --- Moon trail details --- */
.theme-toggle-btn .trail-holder {
  z-index: 2;
  filter: blur(10px);
}

.theme-toggle-btn .trail-holder .trail {
  stroke-width: 4;
}

.theme-toggle-btn .trail {
  stroke-dasharray: 10 80;
  stroke-dashoffset: 10;
  opacity: 0;
  transition-property: stroke-dashoffset, opacity;
  transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5);
  transition-delay: var(--offset), calc(var(--offset) + (var(--step) * 2.5));
  transition-timing-function: var(--ease),
    linear(
      0 0%,
      0.0039 6.25%,
      0.0156 12.5%,
      0.0352 18.75%,
      0.0625 25%,
      0.0977 31.25%,
      0.1407 37.5%,
      0.1914 43.74%,
      0.2499 49.99%,
      0.3164 56.25%,
      0.3906 62.5%,
      0.5625 75%,
      0.7656 87.5%,
      1 100%
    );
}

/* ==================== STATE: LIGHT THEME (pressed='true') ==================== */

.theme-toggle-btn[aria-pressed='true'] .face {
  scale: 1.12;
}

.theme-toggle-btn[aria-pressed='true'] .outline {
  stroke: hsl(0 0% 30%);
}

.theme-toggle-btn[aria-pressed='true'] .inner-bg {
  fill: hsl(0 0% 20%);
}

.theme-toggle-btn[aria-pressed='true'] .socket {
  box-shadow: -0.025em 0.08em 0.2em -0.1em white;
}

.theme-toggle-btn[aria-pressed='true'] .face-glowdrop {
  scale: 1;
}

.theme-toggle-btn[aria-pressed='true'] .face-shadow::before {
  translate: -15% 55%;
  filter: blur(1em);
  opacity: 0.35;
}

.theme-toggle-btn[aria-pressed='true'] .face-shadow::after {
  filter: blur(0.5em);
  scale: 1;
  opacity: 1;
}

.theme-toggle-btn[aria-pressed='true'] .socket-shadow,
.theme-toggle-btn[aria-pressed='true'] .face-glows,
.theme-toggle-btn[aria-pressed='true'] .face-shine {
  opacity: 1;
}

/* Transition to light: instantly hide moon glow and trigger trail */
.theme-toggle-btn[aria-pressed='true'] .glow {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--step);
  transition-delay: 0s;
  transition-timing-function: var(--ease);
}

.theme-toggle-btn[aria-pressed='true'] .trail {
  transition: stroke-dashoffset 0s;
  opacity: 1;
  stroke-dashoffset: -70;
}