@use "functions";
@use "mixins/text-bg";

@mixin global-styles() {
  :root {
    color-scheme: light dark;
  }

  body {
    @include text-bg.current-color-vars(--u-color-on-body);

    background-color: var(--u-color-body);
    color: var(--u-color-on-body);
  }

  a {
    color: #{functions.get-color-transparency-mix(var(--u-color-primary), var(--u-high-emphasis-opacity))};
    border-radius: #{functions.get-spacing-var(extra-small)};
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}