::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

[data-theme-transition="to-dark"]::view-transition-old(root) {
  z-index: 1;
}

[data-theme-transition="to-dark"]::view-transition-new(root) {
  z-index: 9999;
  animation: circular-expand 400ms ease-in-out;
}

[data-theme-transition="to-light"]::view-transition-old(root) {
  z-index: 9999;
  clip-path: circle(150% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
  animation: circular-contract 400ms ease-in-out both;
}

[data-theme-transition="to-light"]::view-transition-new(root) {
  z-index: 1;
  clip-path: none !important;
  animation: none !important;
}

@keyframes circular-expand {
  from {
    clip-path: circle(0% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
  }
  to {
    clip-path: circle(150% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
  }
}

@keyframes circular-contract {
  from {
    clip-path: circle(150% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
  }
  to {
    clip-path: circle(0% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
  }
}