/*!
 *  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 'sass:map';
@use '@angular/material' as mat;

@mixin styles() {
    /* other classes and styles */

    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    a {
        cursor: pointer;
        display: inline-block;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .mat-mdc-form-field-infix {
        min-width: 180px !important;
        width: 180px !important;
    }

    .tooltip {
        max-height: 70vh;
        max-width: 500px;
        padding: 10px;
        border-radius: 2px;
        border-width: 1px;
        word-wrap: break-word;
        white-space: normal;

        ul {
            list-style: disc outside;
            margin-left: 1em;
        }
    }

    .blank,
    .empty,
    .unset,
    .sensitive {
        font-weight: normal !important;
        font-style: italic !important;
        opacity: 0.8 !important;
    }

    .context-logo {
        text-align: start;
        height: 40px;
    }

    .context-name {
        font-size: 15px;
        line-height: 15px;
        height: 15px;
        width: 225px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .context-type {
        font-size: 12px;
        line-height: 12px;
    }

    .context-id {
        font-size: 12px;
        line-height: 14px;
    }

    .hidden {
        display: none;
    }

    .pointer {
        cursor: pointer;
    }

    .copy-button:hover {
        cursor: pointer;
    }

    .dialog-tab-content,
    .dialog-content {
        height: 50vh;
    }

    .flex-2 {
        display: flex;
        flex: 2;
        flex-basis: 100%;
    }

    .flex-1a {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        flex: 1;
    }

    .fa-rotate-45 {
        transform: rotate(-45deg);
    }

    /* overriding 3rd party styles */

    .mat-mdc-dialog-actions {
        border: none !important;
    }

    .mat-tree {
        display: inline !important;
        background-color: unset !important;
    }

    .mat-mdc-card-header-text {
        width: 100%;
    }

    // center input text in form fields
    .mdc-text-field--outlined .mat-mdc-form-field-infix {
        line-height: 24px;
    }

    .mat-expansion-panel-body {
        overflow-y: auto;
    }

    .mat-expansion-panel-header.mat-expanded {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .mat-content.mat-content-hide-toggle {
        margin-right: 0 !important;
        height: 48px;
    }

    .mat-mdc-menu-panel {
        max-width: 420px;

        .fa {
            width: 14px;
            height: 14px;
            text-align: center;
        }

        .icon {
            display: inline-block;
            width: 14px;
            text-align: center;
        }
    }

    .cdk-drag-disabled {
        cursor: not-allowed !important;
    }

    .cdk-drag-placeholder {
        opacity: 0;
    }

    .cdk-drop-list-dragging {
        cursor: grabbing;
    }

    .cdk-drag:hover {
        cursor: grab;
    }

    .cdk-list {
        min-height: 34px;
        border-radius: 4px;
        overflow: hidden;
        display: block;
        user-select: none;
    }

    span.grip {
        width: 12px;
        height: 36px;
        display: block;
        line-height: 6px;
        letter-spacing: 1px;
    }

    .cdk-drag:hover {
        span.grip::after {
            content: '.. .. .. .. ..';
        }
    }

    .cdk-drag-disabled {
        font-style: italic;
    }

    .cdk-drag:hover {
        span.grip::after {
            content: '.. .. .. .. ..';
        }
    }

    .mdc-notched-outline__notch {
        border-right: none;
    }

    .CodeMirror-hints {
        z-index: 1000 !important;
        overflow-y: scroll !important;
    }

    .mat-mdc-tab-header {
        user-select: none;
    }

    .mat-mdc-icon-button {
        &.mat-mdc-button-base.mdc-icon-button {
            padding: 0;
        }
    }

    mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button {
        padding: 11px; //center the mat-icon-button inside the date picker form field
    }

    .mat-mdc-paginator {
        background-color: unset !important;
    }

    .mdc-dialog__content {
        font-size: 14px !important;
    }

    .mat-mdc-menu-content {
        height: 100%;
    }

    .mat-mdc-menu-content .mat-mdc-menu-item {
        min-height: 2.25rem;
    }

    // mat-select mat-option ellipsis
    .mat-mdc-option .mdc-list-item__primary-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }

    // markdown styles

    .mat-typography.text-base markdown {
        h1 {
            margin: 0 0 16px;
            line-height: 28px;
            font-size: 20px;
            font-weight: 700;
        }

        h2 {
            margin: 0 0 16px;
            line-height: 28px;
            font-size: 18px;
            font-weight: 700;
        }

        h3 {
            margin: 0 0 16px;
            line-height: 28px;
            font-size: 18px;
            font-weight: 400;
        }

        h4 {
            margin: unset;
            line-height: 20px;
            font-size: 14px;
            font-weight: 400;
        }

        h5 {
            margin: unset;
            line-height: 20px;
            font-size: 14px;
            font-weight: 400;
        }

        h6 {
            margin: unset;
            line-height: 12px;
            font-size: 12px;
            font-weight: 400;
        }

        ul {
            list-style: disc outside;
            margin: 1em;
        }

        ol {
            list-style: auto outside;
            margin: 1em;
        }

        table {
            display: table;
            border-width: 1px;
            margin-bottom: 1em;
            width: 100%;
            table-layout: fixed;
            text-align: left;
            border-collapse: separate;
            border-spacing: 0;

            th {
                user-select: none;
            }

            td,
            th {
                border-bottom-width: 1px;
                border-bottom-style: solid;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: default;
                text-wrap: wrap;
                padding: 8px;
                word-break: break-word;
            }

            th {
                text-transform: uppercase;
            }

            ul {
                list-style-type: disc;
                list-style-position: inside;

                text-wrap: wrap;
                word-break: break-all;
            }
        }
    }
}

@mixin generate-material-theme() {
    /* semantic color classes */

    .primary-contrast {
        color: var(--mat-sys-on-primary);
        fill: var(--mat-sys-on-primary);
    }

    .primary-color {
        color: var(--mat-sys-primary);
        fill: var(--mat-sys-primary);
    }

    .secondary-contrast {
        color: var(--mat-sys-on-secondary);
        fill: var(--mat-sys-on-secondary);
    }

    .secondary-color {
        color: var(--mat-sys-secondary);
        fill: var(--mat-sys-secondary);
    }

    .tertiary-color {
        color: var(--mat-sys-tertiary);
        fill: var(--mat-sys-tertiary);
    }

    .error-color {
        color: var(--mat-sys-error);
        fill: var(--mat-sys-error);
    }

    .error-color-variant {
        color: var(--nf-error-variant);
        fill: var(--nf-error-variant);
    }

    .neutral-color {
        color: var(--nf-neutral);
        fill: var(--nf-neutral);
    }

    .success-color-variant {
        color: var(--nf-success-variant);
        fill: var(--nf-success-variant);
    }

    .success-color-default {
        color: var(--nf-success-default);
        fill: var(--nf-success-default);
    }

    .caution-color {
        color: var(--nf-caution-default);
        fill: var(--nf-caution-default);
    }

    .caution-color-background {
        background-color: var(--nf-caution-default);
    }

    .neutral-contrast {
        color: var(--mat-sys-on-surface);
        fill: var(--mat-sys-on-surface);
    }

    .disabled {
        color: var(--nf-disabled);
        fill: var(--nf-disabled);
    }

    /* other classes and styles */

    .tooltip {
        background-color: var(--mat-sys-background);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        color: var(--mat-sys-on-surface);
    }

    .property-editor {
        border-radius: 4px;
        box-shadow: var(--mat-sys-level4);
    }

    .text-editor {
        border-radius: 4px;
        box-shadow: var(--mat-sys-level4);
    }

    a {
        color: var(--mat-sys-primary);
        text-decoration-color: var(--mat-sys-primary);
    }

    .has-errors,
    .invalid,
    .stopped,
    .running,
    .transmitting,
    .text-shadow {
        text-shadow: var(--nf-text-shadow);
    }

    .zero {
        opacity: var(--nf-zero-opactiy) !important;
    }

    /* overriding 3rd party styles */

    *:not([class^='mat-']):not([class^='mdc-']):not([class^='resizable-triangle']):not([class^='CodeMirror-cursor']) {
        // Tailwind sets a default that doesn't shift with light and dark themes
        border-color: var(--mat-sys-outline);
    }

    // This will override the above rule in cases where the tailwind style is explicitly set (even on the 'exception' elements)
    .border-t,
    .border-b,
    .border,
    .border-l,
    .border-r {
        border-color: var(--mat-sys-outline);
    }

    * {
        // markdown styles
        markdown {
            table {
                th {
                    @extend .neutral-contrast;
                }

                tbody {
                    tr:hover {
                        background-color: var(
                            --mat-menu-item-hover-state-layer-color,
                            color-mix(
                                in srgb,
                                var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
                                transparent
                            )
                        ) !important;
                    }
                }
            }
        }
    }

    .mat-typography.text-base {
        font-family: var(--mat-sys-body-medium-font);
        line-height: var(--mat-sys-body-medium-line-height);
        font-size: var(--mat-sys-body-medium-size);
        font-weight: var(--mat-sys-body-medium-weight);
        letter-spacing: normal;

        h2 {
            margin: unset;
            line-height: 28px;
            font-size: 18px;
            font-weight: 700;
        }

        h3 {
            margin: 0 0 16px;
            line-height: 28px;
            font-size: 20px;
            font-weight: 700;
        }

        h4 {
            margin: unset;
            line-height: 20px;
            font-size: 14px;
            font-weight: 400;
        }

        a {
            letter-spacing: normal;
        }

        .mdc-text-field--outlined .mdc-floating-label {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
        }

        .mat-mdc-select {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
        }

        .mat-mdc-card-title {
            font-size: 18px;
            letter-spacing: normal;
            line-height: 28px;
            font-weight: 700;
        }

        .mat-mdc-card-subtitle {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: 20px;
            font-weight: 400;
        }

        .mat-mdc-option {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
        }

        .mat-mdc-form-field {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
        }

        .mat-tree-node,
        .mat-nested-tree-node {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
        }

        .mat-mdc-header-cell {
            font-weight: 700;
        }

        .mat-expansion-panel-header {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
            font-weight: 700;
        }

        .mat-expansion-panel-content {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: 20px;
        }

        .mat-mdc-menu-content,
        .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
            --mat-menu-item-label-text-weight: var(--mat-sys-body-medium-weight);
        }

        .mdc-list-item__primary-text {
            font-size: var(--mat-sys-body-medium-size);
            letter-spacing: normal;
            line-height: normal;
        }

        .mat-drawer {
            color: var(--mat-app-text-color);
        }
    }

    .mat-datepicker-content {
        box-shadow:
            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
            0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    }

    .cdk-drop-list-dragging {
        background-color: var(--mat-sys-secondary) !important;
    }

    .cdk-drop-list {
        background: var(--mat-sys-surface-container-low);
    }

    .cdk-drag {
        color: var(--mat-sys-on-surface);
        background: var(--mat-sys-surface);
    }

    .cdk-drag-disabled {
        color: var(--nf-disabled);
        background: var(--mat-sys-background) !important;
    }

    span.grip {
        color: var(--mat-sys-on-surface);
    }

    ngx-skeleton-loader .skeleton-loader {
        background: var(--mat-sys-outline);
    }

    .markdown-clipboard-toolbar {
        opacity: 0;
        transition: opacity 250ms ease-out;
    }

    .markdown-clipboard-toolbar.hover {
        opacity: 1;
    }
}
