/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use 'sass:string';
@use '../variables.scss' as bk;

/*
Note: `light-dark()` is not dynamic, it is computed once at the definition site. That means that we cannot capture
a `light-dark()` expression in a variable and reuse that in a different theme. Mixins are needed for that purpose.
- Ref: https://github.com/web-platform-tests/wpt/blob/master/css/css-color/light-dark-inheritance.html
*/

// Global CSS variables that are theme-dependent
@mixin theme-variables {
  --bk-page-color-text: #{bk.$theme-text-body-default};
  --bk-page-color-background: #{bk.$theme-page-default};
  --bk-focus-outline-color: #{bk.$theme-focused-default};
  --bk-focus-outline-width: 0.2rem;
}

// This mixin should be used after every usage of `color-scheme`
@mixin theme-init {
  @include theme-variables;
  color: var(--bk-page-color-text);
}

@mixin theme($theme) {
  color-scheme: string.unquote($theme);
  @include theme-init; // Recompute theme values after `color-scheme` change
}

@mixin theme-invert($selector: &) {
  // Fallback: if no `bk-theme` class is applied, invert based on the user's preferred scheme.
  // Note: this should have lower precedence than the rules below
  @media (prefers-color-scheme: light) {
    @at-root #{$selector} {
      @include theme('only dark');
    }
  }
  @media (prefers-color-scheme: dark) {
    @at-root #{$selector} {
      @include theme('only light');
    }
  }
  
  // Invert if overridden by a `bk-theme` class
  // NOTE: this will not work for additional `bk-theme-invert` mixins deeper inside the current, because this mixin does
  // not produce a `bk-theme` class.
  @at-root .bk-theme--dark #{$selector} {
    @include theme('only light');
  }
  @at-root .bk-theme--light #{$selector} {
    @include theme('only dark');
  }
  // Once `@scope` is available, convert the above selectors to use `@scope` to prevent the second overring the first
  
  /*
  // Possible solution using `--color-scheme` variables rather than `bk-theme` classes. Downside: this will not allow
  // us to style the container itself.
  @container style(--color-scheme: light) { * { color-scheme: only dark; }
  @container style(--color-scheme: dark) { * { color-scheme: only light; }
  */
}

// Styles to be applied specifically on the `:root` element (see `global.scss`)
@mixin root-styles {
  @include theme('light dark'); // Indicates that we support light and dark themes (in no particular order)
  
  @media print {
    color-scheme: only light;
  }
  
  background: var(--bk-page-color-background); // Must be set on the root so that we style the entire viewport
  color: var(--bk-page-color-text);
}

@mixin styles {
  // Utility classes for theme overrides
  .bk-theme--light { @include theme('only light'); }
  .bk-theme--dark { @include theme('only dark'); }
  .bk-theme--invert { @include theme-invert; }
}
