/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You 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.
 *
 */

/**
 *
 * Note: to change this file, change sp-theme.scss in deployment folder
 * changes in the root folder will be overridden by prebuild script
 *
 */

@import '@angular/material/theming';
@import '../variables';

@include mat-core();

$mat-streampipes-primary: (
        50: #ffebee,
        100: #ffcdd2,
        200: #72e879,
        300: #49e750,
        400: #49e750,
        500: $sp-color-primary,
        600: #06c12a,
        700: #01a51d,
        800: #00841b,
        900: #005818,
        A100: #ff8a80,
        A200: #ff5252,
        A400: #ff1744,
        A700: #d50000,
        contrast: (
                50: $black-87-opacity,
                100: $black-87-opacity,
                200: $black-87-opacity,
                300: $black-87-opacity,
                400: $black-87-opacity,
                500: white,
                600: white,
                700: white,
                800: $white-87-opacity,
                900: $white-87-opacity,
                A100: $black-87-opacity,
                A200: white,
                A400: white,
                A700: white,
        )
);

$mat-streampipes-accent: (
        50: #ffebee,
        100: #ffcdd2,
        200: #4e3c93,
        300: #2a0c9a,
        400: #395481,
        500: $sp-color-accent,
        600: #0303a3,
        700: #01016a,
        800: #000039,
        900: #00002b,
        A100: #ff8a80,
        A200: #ff5252,
        A400: #ff1744,
        A700: #d50000,
        contrast: (
                50: $black-87-opacity,
                100: $black-87-opacity,
                200: $black-87-opacity,
                300: $black-87-opacity,
                400: $black-87-opacity,
                500: white,
                600: white,
                700: white,
                800: $white-87-opacity,
                900: $white-87-opacity,
                A100: $black-87-opacity,
                A200: white,
                A400: white,
                A700: white,
        )
);

$mat-streampipes-accent-dark: (
        50: #ffebee,
        100: #ffcdd2,
        200: #4e3c93,
        300: #2a0c9a,
        400: #395481,
        500: #83a3de,
        600: #0303a3,
        700: #01016a,
        800: #000039,
        900: #00002b,
        A100: #ff8a80,
        A200: #ff5252,
        A400: #ff1744,
        A700: #d50000,
        contrast: (
                50: $black-87-opacity,
                100: $black-87-opacity,
                200: $black-87-opacity,
                300: $black-87-opacity,
                400: $black-87-opacity,
                500: white,
                600: white,
                700: white,
                800: $white-87-opacity,
                900: $white-87-opacity,
                A100: $black-87-opacity,
                A200: white,
                A400: white,
                A700: white,
        )
);

$custom-theme-primary: mat-palette($mat-streampipes-primary);
$custom-theme-accent-dark: mat-palette($mat-streampipes-accent-dark);
$custom-theme-accent: mat-palette($mat-streampipes-accent);
$custom-theme-warn: mat-palette($mat-red);

$custom-theme-light: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
$custom-theme-dark: mat-dark-theme($custom-theme-primary, $custom-theme-accent-dark, $custom-theme-warn);

$custom-typography: mat-typography-config($font-family: 'Roboto, Arial');


@include angular-material-typography($custom-typography);

$primary: map-get($custom-theme-light, primary);
$accent-dark: map-get($custom-theme-dark, accent);
$accent: map-get($custom-theme-light, accent);


.small .mat-tab-label {
  height: 24px;
  padding: 0 12px;
  cursor: pointer;
  box-sizing: border-box;
  opacity: .6;
  min-width: 80px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  position: relative;
}

.small .mat-tab-label-content {
  text-transform: none;
  font-size: 11pt;
}

:root {
  --color-loading-bar: #{mat-color($accent)};
}

.dark-mode {
  @include angular-material-theme($custom-theme-dark);

  .base-style {
    color: rgba(255, 255, 255, 0.87);
    background: #121212;
  }

  .mat-button-toggle-checked {
    background: var(--color-accent);
    color: var(--color-bg-0);
  }

  .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
    color: var(--color-bg-0);
  }

  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 30px;
  }

  .mat-toolbar.mat-primary {
    color: #121212;
  }

  .mat-tooltip.tooltip {
    background-color: rgba(255, 255, 255, 0.87);
    font-size: 12px;
  }

  --color-primary: #{mat-color($primary)};
  --color-accent: #{mat-color($accent-dark)};
  --color-bg-0: #121212;
  --color-bg-1: #282828;
  --color-bg-2: #404040;
  --color-bg-3: #424242;
  --color-bg-4: #5f5f5f;
  --color-bg-dialog: rgb(66, 66, 66);
  --color-shadow: #c4c4c4;
  --color-pe: #404040;
  --color-default-text: rgba(255, 255, 255, 0.87);
  --color-warn: #b36161;

  --color-tab-border : #cccccc;

  --color-navigation-bg: #{mat-color($primary)};
  --color-navigation-link-text: #121212;
  --color-navigation-text: #121212;
  --color-navigation-selected: #{mat-color($primary)};
  --color-navigation-hover: #{mat-color($primary, 600)};
  --color-navigation-bg-selected: #121212;
  --color-navigation-divider: #{mat-color($primary)};

  --content-box-color: #404040;
  --canvas-color: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, transparent 0%), linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%);

}

.light-mode {
  @include angular-material-theme($custom-theme-light);

  .base-style {
    color: #121212;
    background: #FFFFFF;
  }

  .mat-button-toggle-checked {
    background: var(--color-accent);
    color: var(--color-bg-0);
  }

  .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
    color: var(--color-bg-0);
  }

  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 30px;
  }


  --color-primary: #{mat-color($primary)};
  --color-accent: #{mat-color($accent)};
  --color-bg-0: #FFFFFF;
  --color-bg-1: #FAFAFA;
  --color-bg-2: #f1f1f1;
  --color-bg-3: rgb(224, 224, 224);
  --color-bg-4: rgb(212, 212, 212);
  --color-bg-dialog: #FFFFFF;
  --color-shadow: #555;
  --color-pe: #FFFFFF;
  --color-default-text: #121212;
  --color-warn: #B71C1C;

  --color-tab-border : #cccccc;

  --color-navigation-bg: #{mat-color($primary)};
  --color-navigation-link-text: #FFFFFF;
  --color-navigation-text: #FFFFFF;
  --color-navigation-selected: #{mat-color($primary)};
  --color-navigation-hover: #{mat-color($primary, 600)};
  --color-navigation-bg-selected: #FFFFFF;
  --color-navigation-divider: #{mat-color($primary)};

  --content-box-color: rgb(156, 156, 156);
  --canvas-color: linear-gradient(90deg, rgba(208, 208, 208, 0.5) 10%, transparent 0%), linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%);

}
