@use 'sass:color';
@use 'sass:map';
@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;

$theme-colors: (
  'default': oklch(0.75 0.1 297.94),
  'primary': oklch(0.636 0.137 235.915),
  'secondary': oklch(55% 0.02 244.89),
  'success': oklch(0.55 0.1 177.8),
  'danger': oklch(0.618 0.203 20.568),
  'warning': colors.$warning-color,
  'info': colors.$info-color,
  'light': colors.$gray-200,
  'dark': colors.$dark-color,
);

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

// Create utilities for colors, background and text
//--------------------------------------------------
$theme-colors: map.remove($theme-colors, 'secondary', 'warning', 'info', 'light', 'dark');
$theme-colors: map.set($theme-colors, 'danger', oklch(0.68 0.17 18));
.dark {
  color-scheme: dark;

  @each $name, $color in $theme-colors {
    @include decorators.decorate-color($name, $color, $text-bg: true, $hyperlink: true);
  }
}

// Global component css variables
//--------------------------------
@layer theme {
  .dark {
    // Global css variables to maintain apps UI colors
    //------------------------------------------------
    --background: oklch(0.213 0 89.876);
    --foreground: oklch(0.8 0 0);
    --background-secondary: oklch(0.25 0 0);
    --foreground-secondary: oklch(0.85 0 0);
    --background-tertiary: oklch(0.3 0 0);
    --foreground-tertiary: oklch(0.85 0 0);
    --foreground-subtle: oklch(0.65 0 0);
    --foreground-subtle-tertiary: #{colors.$neutral-darken-1};
    --border-translucent: oklch(0.967 0.003 264.542 / 0.08);

    --appbar-background: oklch(0.22 0 89.876);
    --appbar-foreground: var(--foreground);

    --sidedrawer-background: oklch(0.182 0 89.876);
    --sidedrawer-foreground: var(--foreground);
    --sidedrawer-item-active-background: oklch(0.4 0.04 284.73);
    --sidedrawer-item-active-foreground: oklch(0.95 0.03 298.65);
    --sidedrawer-item-active-foreground-secondary: oklch(0.796 0.062 295.364 / 0.75);
    --sidedrawer-item-hover-background: oklch(0.535 0.005 271.325 / 0.15);

    --navigation-item-active-foreground: oklch(0.88 0.07 297.73);
    --navigation-item-active-foreground-secondary: oklch(0.796 0.062 295.364 / 0.75);
    --navigation-item-hover-background: oklch(0.535 0.005 271.325 / 0.15);

    // Global css variables to maintain UI component aspects
    //-------------------------------------------------------
    --#{vars.$prefix}dropdown-border-color: var(--border-translucent);
    --#{vars.$prefix}dropdown-border-width: thin;
    --#{vars.$prefix}field-active-indicator: var(--#{vars.$prefix}field-accent-indicator);
    --#{vars.$prefix}field-button-hover-color: #{colors.$neutral-lighten-2};
  }
}