@use 'sass:color';
@use '../mixins/css3/text-decorators' as decorators;
@use '../mixins/theme-maker' as themer;
@use '../utils/color-helper' as helper;
@use '../color-vars' as colors;
@use '../variables' as vars;
@use '../banner';

// Specify the layer order that follows the TailwindCSS,
// this is necessary so that TailwindCSS does not break.
//
// The layer order is not mandatory and they can be removed
// if the script to build the theme is not placed inside a layer.
@layer theme, base, components, animations, utilities;

// The layer is not mandatory and they can be removed.
@layer components {
  @include themer.make-theme-light(colors.$context-colors);
}

// Create utilities for colors, background and text
//--------------------------------------------------
@each $name, $color in colors.$context-colors {
  @include decorators.decorate-color($name, $color, $text-bg: true, $hyperlink: true);
}

// Global component css variables
//--------------------------------
@layer theme {
  :root {
    // Global css variables to maintain apps UI colors
    //-------------------------------------------------
    --background: #{colors.$white};
    --foreground: #{colors.$neutral-darken-4};

    --background-secondary: #{colors.$white};
    --foreground-secondary: #{colors.$neutral-darken-4};

    --background-tertiary: #{colors.$white};
    --foreground-tertiary: #{colors.$neutral-darken-4};

    --foreground-subtle: #{colors.$neutral-darken-1};
    --foreground-subtle-secondary: #{colors.$neutral-base};
    --foreground-subtle-tertiary: #{colors.$neutral-lighten-2};

    --border-translucent: oklch(0.88 0.001 17.18 / 0.75);

    --appbar-background: var(--background);
    --appbar-foreground: var(--foreground);

    --sidedrawer-background: oklch(0.969 0.005 247.877);
    --sidedrawer-foreground: var(--foreground);
    --sidedrawer-item-foreground: var(--foreground);
    --sidedrawer-item-foreground-secondary: var(--foreground-subtle);
    --sidedrawer-item-foreground-subtle: var(--foreground-subtle-secondary);
    --sidedrawer-item-active-background: oklch(0.65 0.13 294.86 / 0.3); // #{vars.$default-active-bgcolor};
    --sidedrawer-item-active-foreground: #{helper.to-oklch(
        color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 1)
      )};
    --sidedrawer-item-active-foreground-secondary: #{helper.to-oklch(
        color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 0.75)
      )};
    --sidedrawer-item-hover-background: #{vars.$default-hover-bgcolor};
    --sidedrawer-item-hover-foreground: var(--foreground);
    --sidedrawer-item-border-indicator: var(--#{vars.$prefix}field-active-indicator);
    --sidedrawer-item-divider-color: var(--border-translucent);
    --sidedrawer-item-expanded-background: oklch(0 0 0 / 0.03);

    // Used in dropdown menus, list-tile, list-nav and other similar UI
    --navigation-background: var(--background-secondary);
    --navigation-item-foreground: var(--foreground);
    --navigation-item-foreground-secondary: var(--foreground-subtle);
    --navigation-item-foreground-subtle: var(--foreground-subtle-secondary);
    --navigation-item-active-background: #{vars.$default-active-bgcolor};
    --navigation-item-active-foreground: #{helper.to-oklch(
        color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 1)
      )};
    --navigation-item-active-foreground-secondary: #{helper.to-oklch(
        color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 0.75)
      )};
    --navigation-item-hover-background: #{vars.$default-hover-bgcolor};
    --navigation-item-hover-foreground: var(--foreground);
    --navigation-item-hover-foreground-secondary: #{colors.$gray-600};
    --navigation-item-expanded-background: oklch(0 0 0 / 0.025);
    --navigation-item-border-indicator: var(--#{vars.$prefix}field-active-indicator);
  }
}