@use "sass:list";
@use "../core/instances" as *;

.theme_toggle_mount {
    display: block;
}

.theme_toggle {
    @include no-border;
    @include no-spacing;
    @include flex;
    @include align-items(center);
    @include justify-content(center);
    @include whs(list.nth($l3, 1));
    @include bc($c0, var(--theme_text));
    cursor: pointer;
    position: relative;

    .icon_light,
    .icon_dark {
        position: absolute;
        inset: 0;
    }

    span[class^="icon_"] {
        @include normalize-svg((
            w: list.nth($l3, 1),
            h: list.nth($l3, 1)
        ));
        display: block;
    }
}

::view-transition-group(root) {
  animation-duration: 0.7s;
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  animation-name: reveal-light;
  animation-fill-mode: both;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  animation-fill-mode: both;
  z-index: -1;
}
.dark::view-transition-new(root) {
  animation-name: reveal-dark;
  animation-fill-mode: both;
}

@keyframes reveal-dark {
  from {
    clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
  }
  to {
    clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
  }
}

@keyframes reveal-light {
  from {
    clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
  }
  to {
    clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
  }
}