/**
 * Copyright © 2016-2026 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use '@angular/material' as mat;
@use 'theme-overwrites' as overwrites;
@use '@angular/material/core/tokens/m2-utils';
@import '../theme/datepicker-theme';
@import './scss/constants';

@include mat.all-component-typographies();
@include mat.elevation-classes();
@include mat.app-background();

$tb-mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: $tb-primary-color-light,
  400: #5c6bc0,
  500: $tb-primary-color,
  600: $tb-secondary-color,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: $tb-hue3-color,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  )
);

$tb-primary: mat.m2-define-palette($tb-mat-indigo);
$tb-accent: mat.m2-define-palette(mat.$m2-deep-orange-palette);

$tb-mat-theme: mat.m2-define-light-theme((
  color: (
    primary: $tb-primary,
    accent: $tb-accent
  ),
  typography: mat.m2-define-typography-config(
    $button: mat.m2-define-typography-level(14px, 36px, 500, $letter-spacing: 0.03125em)
  ),
  density: 0
));

$tb-theme-system: m2-utils.get-system($tb-mat-theme);
$tb-theme-system: map_merge($tb-theme-system, ( background: map_get(mat.$m2-grey-palette, 200) ));
$tb-theme: map_merge($tb-mat-theme, (_mat-system: $tb-theme-system));

$primary: mat.m2-get-color-from-palette($tb-primary);
$accent: mat.m2-get-color-from-palette($tb-accent);

$tb-dark-mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: $tb-dark-primary-color,
  600: $tb-secondary-color,
  700: #303f9f,
  800: $tb-primary-color,
  900: #1a237e,
  A100: $tb-hue3-color,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: rgba(black, 0.87),
    500: map_get($tb-mat-indigo, 900),
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: rgba(black, 0.87),
    A700: rgba(black, 0.87),
  )
);

$tb-dark-primary: mat.m2-define-palette($tb-dark-mat-indigo);

$tb-dark-theme: mat.m2-define-dark-theme((
  color: (
    primary: $tb-dark-primary,
    accent: $tb-accent
  ),
  typography: mat.m2-define-typography-config(),
  density: 0
));

$tb-dark-theme-system: m2-utils.get-system($tb-dark-theme);
$tb-dark-theme-system: map_merge($tb-dark-theme-system, ( surface: map_get($tb-dark-mat-indigo, 800) ));
$tb-dark-theme: map_merge($tb-dark-theme, (_mat-system: $tb-dark-theme-system));

@mixin mat-fab-toolbar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  mat-fab-toolbar {
    .mat-fab-toolbar-background {
      background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));
      color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));
    }
    &.mat-primary {
      .mat-fab-toolbar-background {
        background: mat.m2-get-color-from-palette($primary);
        color: mat.m2-get-color-from-palette($primary, default-contrast);
      }
    }
    &.mat-accent {
      .mat-fab-toolbar-background {
        background: mat.m2-get-color-from-palette($accent);
        color: mat.m2-get-color-from-palette($accent, default-contrast);
      }
    }
    &.mat-warn {
      .mat-fab-toolbar-background {
        background: mat.m2-get-color-from-palette($warn);
        color: mat.m2-get-color-from-palette($warn, default-contrast);
      }
    }
  }
}

@mixin _mat-toolbar-inverse-color($palette) {
  background: mat.m2-get-color-from-palette($palette, default-contrast);
  color: rgba(black, 0.87);
}

@mixin mat-fab-toolbar-inverse-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, foreground);
  $foreground: map-get($theme, background);

  mat-fab-toolbar {
    .mat-fab-toolbar-background {
      background: mat.m2-get-color-from-palette($background, app-bar);
      color: mat.m2-get-color-from-palette($foreground, text);
    }
    &.mat-primary {
      .mat-fab-toolbar-background {
        @include _mat-toolbar-inverse-color($primary);
      }
    }
    mat-toolbar {
      &.mat-primary {
        @include _mat-toolbar-inverse-color($primary);
        button.mat-mdc-icon-button {
          .mat-icon {
            color: mat.m2-get-color-from-palette($primary);
          }
        }
      }
    }
    .mat-mdc-fab {
      &.mat-primary {
        background: mat.m2-get-color-from-palette($primary, default-contrast);
        color: mat.m2-get-color-from-palette($primary);
      }
    }
  }

}

@mixin tb-components-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);

  mat-toolbar{
    &.mat-hue-3 {
      background-color: mat.m2-get-color-from-palette($primary, 'A100');
    }
  }

  @include mat-fab-toolbar-theme($tb-theme);

  div.tb-dashboard-page.mobile-app {
    @include mat-fab-toolbar-inverse-theme($tb-theme);
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(203, 203, 203, 0.8);
    &:hover {
      background: rgba(165, 165, 165, 0.65);
    }
  }
}

.tb-default {
  @include mat.all-component-themes($tb-theme);
  @include mat-datetimepicker-theme($tb-theme);
  @include tb-components-theme($tb-theme);
  @include overwrites.theme-overwrites($tb-primary, $tb-theme);
  @include mat.typography-hierarchy($tb-theme);
}

.tb-dark {
  @include mat.all-component-colors($tb-dark-theme);
}