@use "./mixins/normalize.scss";

@layer onyx.utility {
  :root {
    // TODO: remove in v2 (https://github.com/SchwarzIT/onyx/issues/4560)
    /** @deprecated Use --onyx-font-family-paragraph instead */
    --onyx-font-family: var(--onyx-font-family-paragraph), sans-serif;
    --onyx-1px-in-rem: 0.0625rem;

    // animation/transition durations
    --onyx-duration-sm: 400ms;
    --onyx-duration-md: 700ms;
    --onyx-duration-lg: 1s;

    // shadows (x, y, blur, spread, color)
    --onyx-shadow-medium-top: 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-medium-bottom: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-medium-left: -0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-medium-right: 0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-soft-top: 0 -0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-soft-bottom: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-soft-left: -0.5rem 0 1.5rem 0 rgba(0, 0, 0, 0.1);
    --onyx-shadow-soft-right: 0.5rem 0 1.5rem 0 rgba(0, 0, 0, 0.1);

    --onyx-outline-width: 0.25rem;

    --onyx-nav-bar-height: 3.5rem;

    // TODO: remove in v2 (https://github.com/SchwarzIT/onyx/issues/4560)
    /** @deprecated Use --onyx-color-component-opacity-backdrop-soft instead */
    --onyx-color-component-opacity-backdrop: var(--onyx-color-component-opacity-backdrop-soft);
  }

  :root {
    color-scheme: light;
  }
  .dark {
    color-scheme: dark;
  }

  .dark {
    --onyx-shadow-medium-top: none;
    --onyx-shadow-medium-bottom: none;
    --onyx-shadow-medium-left: none;
    --onyx-shadow-medium-right: none;
    --onyx-shadow-soft-top: none;
    --onyx-shadow-soft-bottom: none;
    --onyx-shadow-soft-left: none;
    --onyx-shadow-soft-right: none;
  }
}
:where(html.onyx-transition-active *) {
  transition-duration: 0.2s;
  transition-property: color, background-color, border-color;
  transition-timing-function: ease-in-out;
}
@layer onyx.reset {
  .onyx-component {
    @include normalize.apply;
  }
}