@use "~/styles/variables" as *;

.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: $border-radius-full;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: $transition-base;
  background: var(--background-secondary);

  &:hover {
    .toggle-background {
      opacity: 1;
      transform: scale(1.1);
    }
  }

  .toggle-background {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      var(--accent-primary) 0%,
      var(--accent-secondary) 100%
    );
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0.9);
  }

  .icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-primary);
    z-index: 1;

    &.sun {
      color: #ffd700;

      .rays {
        position: absolute;
        inset: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;

        .ray {
          position: absolute;
          width: 2px;
          height: 8px;
          background: currentColor;
          border-radius: $border-radius-full;
          opacity: 0.7;
          left: calc(50% - 1px);
          top: 41%;
          transform-origin: center center;
          animation: ray-pulse 2s infinite;

          @for $i from 1 through 8 {
            &.ray-#{$i} {
              --rotation: #{$i * 45}deg;
              transform: rotate(var(--rotation)) translateY(-16px);
              animation-delay: #{$i * 0.1}s;
            }
          }
        }
      }
    }

    &.moon {
      color: #c6c6c6;

      .stars {
        position: absolute;
        inset: -4px;

        .star {
          position: absolute;
          width: 2px;
          height: 2px;
          background: white;
          border-radius: 50%;
          animation: twinkle 1.5s infinite;

          &.star-1 {
            top: 25%;
            left: 25%;
          }
          &.star-2 {
            top: 40%;
            right: 25%;
            animation-delay: 0.3s;
          }
          &.star-3 {
            bottom: 25%;
            left: 40%;
            animation-delay: 0.6s;
          }
        }
      }
    }
  }
}

@keyframes ray-pulse {
  0%,
  100% {
    transform: rotate(var(--rotation)) translateY(-14px) scaleY(1);
    opacity: 0.7;
  }
  50% {
    transform: rotate(var(--rotation)) translateY(-24px) scaleY(1.2);
    opacity: 0.3;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.5);
  }
}
