/* header-switch-theme-button.component.scss */

/* Base styling for SVG elements */
.svg-icon {
  transition: fill 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Moon cutout styling - hidden by default in light mode */
.moon-cutout {
  transition: fill 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  fill: #1a1a18; /* Default darker color */
  opacity: 0; /* Hidden in light mode */
}

/* LIGHT MODE (default) - show sun */
/* Base circle acts as the sun */
.svg-icon circle[cx="12"][cy="12"][r="5"] {
  fill: currentColor;
}

/* DARK MODE - show moon */
/* Show the moon cutout in dark mode */
:host-context(.dark) .moon-cutout,
body[data-theme="dark"] .moon-cutout {
  fill: var(--color-nier-dark-bg, #292925);
  opacity: 1; /* Visible in dark mode */
}

/* HOVER STATE - always show moon with rotation */
/* Rotation animation on hover */
:host-context(.svg-button-container:hover) .svg-icon,
.svg-button-container:hover .svg-icon {
  transform: rotate(45deg);
  color: var(--color-nier-text-light, #dcd8c0);
  fill: var(--color-nier-text-light, #dcd8c0);
}

/* Always show moon cutout on hover */
:host-context(.svg-button-container:hover) .moon-cutout,
.svg-button-container:hover .moon-cutout {
  opacity: 1;
  fill: #3a3a34; /* Dark color for cutout on hover */
}

/* ACTIVE STATE - same as hover */
:host-context(.svg-button-container:active) .svg-icon,
.svg-button-container:active .svg-icon {
  transform: rotate(45deg);
  color: var(--color-nier-text-light, #dcd8c0);
  fill: var(--color-nier-text-light, #dcd8c0);
}

:host-context(.svg-button-container:active) .moon-cutout,
.svg-button-container:active .moon-cutout {
  opacity: 1;
  fill: #3a3a34;
}

/* Touch device support */
@media (hover: none) {
  :host-context(.svg-button-container:active) .svg-icon,
  .svg-button-container:active .svg-icon {
    transform: rotate(45deg);
    color: var(--color-nier-text-light, #dcd8c0);
    fill: var(--color-nier-text-light, #dcd8c0);
  }

  :host-context(.svg-button-container:active) .moon-cutout,
  .svg-button-container:active .moon-cutout {
    opacity: 1;
    fill: #3a3a34;
  }
}
