html {
  /* Body scale/translate for the mobile dialog animation. */
  --sl-dialog-scale: 0.92;
  --sl-dialog-translate: 0 var(--sl-size-200);

  background: var(--sl-color-palette-grey-800);

  @media (prefers-reduced-motion: no-preference) {
    &.sl-dialog-leave body {
      animation: sl-dialog-leave 0.2s ease-out forwards;
    }

    @media (width <= 600px) {
      &.sl-dialog-enter body {
        animation: sl-dialog-enter 0.2s ease-in forwards;
      }
    }
  }
}

body {
  background: var(--sl-elevation-surface-base-default);
  color: var(--sl-color-foreground-plain);
  min-block-size: 100dvh;
  transform-origin: top;
}

a[href] {
  color: var(--sl-color-component-link-idle, var(--sl-color-link-idle));
}

a[href]:active {
  color: var(--sl-color-component-link-active, var(--sl-color-link-active));
}

a[href]:hover {
  color: var(--sl-color-component-link-hover, var(--sl-color-link-hover));
}

@keyframes sl-dialog-enter {
  from {
    border-radius: 0;
    scale: 1;
    translate: 0;
  }

  to {
    border-radius: var(--sl-size-borderRadius-default);
    scale: var(--sl-dialog-scale);
    translate: var(--sl-dialog-translate);
  }
}

@keyframes sl-dialog-leave {
  from {
    border-radius: var(--sl-size-borderRadius-default);
    scale: var(--sl-dialog-scale);
    translate: var(--sl-dialog-translate);
  }

  to {
    border-radius: 0;
    scale: 1;
    translate: 0;
  }
}