@use 'typography-vars' as *;
@use 'tokens/c8y-design-tokens-dark' as dark;

/* CUMULOCITY-IOT BRAND CSS VARS */

$use-relative-paths: false !default;

$image-path: '';

/* DEPRECATED - Must be defined early for fallback usage */
$appLogo: deprecated; // replaces the app icon with an image.

//falbacks
$brand-logo-img-fallback: if($use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'); // Logo for login and loading
$brand-logo-img-fallback-dark: if($use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'); // Logo for login and loading

$brand-logo-height-fallback: 20%;

$navigator-platform-logo-fallback:if($appLogo=deprecated, if($use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'), $appLogo); // legacy support
$navigator-platform-logo-dark-fallback:   if($appLogo=deprecated, if($use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'), $appLogo); // legacy support

$navigator-platform-logo-height-fallback: 32px;
$appLogo-height: deprecated;
$appBranding: ''; //When different from empty, hides app name in navigator
$powered-by: ''; // when set adds an image below login form. ex.: trackerando


// Login
$brand-logo-img: var(--brand-logo-img, var(--c8y-brand-logo-img));
$brand-logo-height: var(--brand-logo-img-height, var(--c8y-brand-logo-img-height));

$navigator-platform-logo: var(--navigator-platform-logo, var(--c8y-navigator-platform-logo));

$navigator-platform-logo-height: var(--navigator-platform-logo-height, var(--c8y-navigator-platform-logo-height));

// Typography
$font-family-headings-css-var: var(--c8y-font-family-headings, $headings-font-family);
$font-family-base-css-var: var(--c8y-font-family-base, $font-family-base);

// Backward compatibility tokens

:root, .c8y-light-theme{
  --c8y-brand-logo-img: url('#{$brand-logo-img-fallback}');
  --c8y-brand-logo-height: #{$brand-logo-height-fallback};

  --c8y-navigator-platform-logo: url('#{$navigator-platform-logo-fallback}');
  --c8y-navigator-platform-logo-height: #{$navigator-platform-logo-height-fallback};

  --c8y-header-color: var(--c8y-main-header-background-default);
  --c8y-header-text-color: var(--c8y-main-header-text-color-default);
  --c8y-header-hover-color: var(--c8y-main-header-text-color-hover);

  --c8y-navigator-bg-color: var(--c8y-navigator-background-default);
  --c8y-navigator-header-bg: var(--c8y-navigator-header-background);

  --c8y-navigator-title-color: var(--c8y-navigator-header-color);

  --c8y-navigator-active-bg: var(--c8y-navigator-background-selected);

  --c8y-navigator-text-color: var(--c8y-navigator-text-color-default);
  --c8y-navigator-color-active: var(--c8y-navigator-text-color-selected);

  --c8y-navigator-border-active: var(--c8y-navigator-border-selected);

  --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
}

.c8y-dark-theme{
  --c8y-brand-logo-img: url('#{$image-path}#{$brand-logo-img-fallback-dark}');
  --c8y-navigator-platform-logo: url('#{$navigator-platform-logo-dark-fallback}');

  --c8y-header-color: var(--c8y-main-header-background-default);
  --c8y-header-text-color: var(--c8y-main-header-text-color-default);
  --c8y-header-hover-color: var(--c8y-main-header-text-color-hover);

  --c8y-navigator-bg-color: var(--c8y-navigator-background-default);
  --c8y-navigator-header-bg: var(--c8y-navigator-header-background);

  --c8y-navigator-title-color: var(--c8y-navigator-header-color);

  --c8y-navigator-active-bg: var(--c8y-navigator-background-selected);

  --c8y-navigator-text-color: var(--c8y-navigator-text-color-default);
  --c8y-navigator-color-active: var(--c8y-navigator-text-color-selected);

  --c8y-navigator-border-active: var(--c8y-navigator-border-selected);

  --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);

  --body-background-color: var(--c8y-body-background-color);
}

.c8y-system-theme {
  @media (prefers-color-scheme: dark){
    @include dark.c8y-dark-theme();
  }
}