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

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

@include mat.core();

.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-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: $sp-color-accent-dark,
    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.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);

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

.dark-mode {
    @include mat.all-component-themes($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.core-theme($custom-theme-light);
    @include mat.all-component-typographies();
    @include mat.all-component-themes($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;
        }
    }
}
