/*
 * 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.
 *
 */

@use '@angular/material' as mat;
@use '../_variables' as sp;

@include mat.core();

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

.nav-input {
    @include mat.input-density(-3);
}

.nav-form-field {
    @include mat.form-field-density(-2);
}

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

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

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

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

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

$custom-theme-light: mat.define-light-theme(
    (
        color: (
            primary: $custom-theme-primary,
            accent: $custom-theme-accent,
            warn: $custom-theme-warn,
        ),
        typography: $custom-typography,
        density: -1,
    )
);

$custom-theme-dark: mat.define-light-theme(
    (
        color: (
            primary: $custom-theme-primary,
            accent: $custom-theme-accent-dark,
            warn: $custom-theme-warn,
        ),
        typography: $custom-typography,
        density: -1,
    )
);

$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: 0.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;
}

@include mat.all-component-themes($custom-theme-light);

.dark-mode {
    @include mat.all-component-colors($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;
    }
}

.light-mode {
    @include mat.all-component-colors($custom-theme-light);

    .small-form-field-density {
        @include mat.form-field-density(-3);
    }

    .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;
    }

    .mdc-text-field--filled:not(.mdc-text-field--disabled) {
        background: var(--color-bg-0);
        border: 1px solid var(--color-bg-3);
    }

    .mdc-text-field--filled:not(.mdc-text-field--disabled)
        .mdc-line-ripple::before {
        border-bottom-color: var(--color-bg-3);
    }

    .mat-mdc-form-field-focus-overlay {
        background: var(--color-bg-3);
    }

    .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
        transform: none;
    }

    .form-field-small {
        .mdc-list-item__primary-text {
            font-size: 14px;
        }
    }

    .form-field-small-min-width {
        min-width: 130px;

        .mdc-list-item__primary-text {
            font-size: 14px;
        }
    }
}
