@import (reference) 'core-variables';
@import (reference) 'component-variables';
@import (reference) '../mixins/look-and-feel';
@import './design-tokens';
@import '@atlassian/aui/entry/token-themes-generated/aui-prototyping-lf-extracted-color-channels';

:root {
    #aui-themes.design-tokens();

    // The L&F switched colors are dependent on color channels of the design
    // tokens, so will be available only when design tokens are loaded.
    #aui.lf-define-switched-color(
        @switch-on: --atl-theme-header-bg-color;
        @token: '--ds-text';
    );
    #aui.lf-define-switched-color(
        @switch-on: --atl-theme-header-bg-color;
        @token: '--ds-background-neutral-hovered';
    );
    #aui.lf-define-switched-color(
        @switch-on: --atl-theme-header-bg-color;
        @token: '--ds-background-neutral-subtle-pressed';
    );
    #aui.lf-define-switched-color(
        @switch-on: --atl-theme-header-primary-button-bg-color;
        @token: '--ds-text-inverse';
    );
    #aui.lf-define-switched-color(
        @switch-on: --atl-theme-header-bg-color;
        @token: '--ds-icon';
    );

    #aui.lf-define-tinted-color(
        @input-color: --atl-theme-header-bg-color;
        @tinting-mode: contrasting;
    );
    #aui.lf-define-tinted-color(
        @input-color: --atl-theme-header-primary-button-bg-color;
        @tinting-mode: slight;
    );
}

#aui-themes {
    .when-light-mode(@rules) {
        html:not([data-color-mode]),
        html[data-color-mode='light'] {
            @rules();
        }
        @media (prefers-color-scheme: light) {
            html[data-color-mode-auto]:not([data-color-mode]) {
                @rules();
            }
        }
    }
    .when-dark-mode(@rules) {
        html[data-color-mode='dark'] {
            @rules();
        }
        @media (prefers-color-scheme: dark) {
            html[data-color-mode-auto]:not([data-color-mode]) {
                @rules();
            }
        }
    }
}