@use "vuepress-shared/styles/reset";

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

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

[data-theme="light"]::view-transition-new(root),
[data-theme="dark"]::view-transition-old(root) {
  z-index: 99999;
}

.vp-color-mode-switch {
  @include reset.button;
  vertical-align: middle;

  padding: 6px;

  color: var(--vp-c-text-mute);

  cursor: pointer;

  transition: color var(--vp-t-color);

  &:hover {
    color: var(--vp-c-accent-bg);
  }

  .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}