@use "@angular/material" as mat;
@mixin ui-suggest-theme($theme) {
    $foreground: map-get($theme, "foreground");
    $background: map-get($theme, "background");
    $is-dark: map-get($theme, "is-dark");
    $primary-palette: map-get($theme, "primary");
    $warn-palette: map-get($theme, "warn");

    $ui-focus-overlay: rgba(map-get($foreground, "base"), 0.12);
    $ui-hover-overlay: rgba(map-get($foreground, "base"), 0.04);

    $componentName: "ui-suggest";

    .mat-toolbar #{$componentName} {
        .mat-mdc-input-element {
            color: map-get($foreground, "text");
        }
    }

    .ui-suggest-dropdown-item-list-container {
        background-color: map-get($background, "dialog");
        .mat-mdc-list {
            &-item {
                &.selected {
                    background-color: map-get($background, "disabled-button");
                }

                &.selected.active,
                &.active,
                &:hover,
                &.selected:hover {
                    background-color: map-get($background, "hover");
                }
            }
        }
    }

    #{$componentName} {
        .display {
            mat-icon {
                color: inherit;
            }

            mat-icon.clear:hover,
            mat-icon.clear:focus {
                color: map-get($warn-palette, "default");
            }
        }
    }

    mat-form-field.mat-form-field-hide-placeholder #{$componentName} {
        .mat-chip-grid {
            .mat-mdc-input-element::placeholder {
                color: currentColor !important;
                -webkit-text-fill-color: currentColor !important;
            }
        }
    }

    #{$componentName}:not(.form-control) {
        .display {
            &:focus {
                background-color: $ui-focus-overlay;
            }

            &:hover {
                background-color: $ui-hover-overlay;
            }
        }
    }
}

@mixin ui-grid-search-theme($theme) {
    $warn-palette: map-get($theme, "warn");

    .ui-grid-search-cancel {
        &:hover,
        &:focus {
            color: map-get($warn-palette, "default");
        }
    }
}

$ui-grid-cell-background-color: var(--color-background, #ffffff);
$ui-grid-border-color: var(--color-border-de-emp, #cfd8dd);
$ui-grid-cell-bottom-border: 1px solid $ui-grid-border-color;
$ui-grid-row-hover-color: var(--color-data-grid-hover, #F1F2F3);
$ui-grid-header-pressed-color: var(--color-data-grid-pressed, #EAECED);
$header-background-color:  var(--color-background-secondary, #f4f5f7);
$grid-actions-box-shadow: var(--color-background, #ffffff);
$highlighted-entity-color: var(--color-primary, #0067df);
$scroll-margin-shadow-color: var(--color-background-inverse, #182027);


/* https://github.com/angular/material2/blob/master/src/lib/button/_button-base.scss */
$ui-grid-default-transition: 200ms cubic-bezier(0.35, 0, 0.25, 1);
$ui-grid-opacity-transition: opacity $ui-grid-default-transition;

@mixin ui-grid-theme($theme) {
    $is-dark: map-get($theme, "is-dark");
    $foreground: map-get($theme, "foreground");
    $background: map-get($theme, "background");
    $accent-palette: map-get($theme, "accent");

    $primary-palette: map-get($theme, "primary");
    $primary-color: map-get($primary-palette, "default");
    $ui-grid-resize-hover-color: $primary-color;
    $ui-grid-resize-focus-color: $primary-color;
    $ui-grid-resize-handle-hover-delay: 200ms;

    $ui-grid-primary-text-color: map-get($foreground, "text");
    $ui-grid-secondary-text-color: map-get($foreground, "secondary-text");
    $ui-grid-scrollbar-color: map-get($foreground, "text");

    $ui-grid-accent-color: map-get($accent-palette, "default");

    $ui-grid-background: map-get($background, "card");
    $ui-grid-elevation-color: rgb(0, 0, 0);

    $_hover-base: mix($ui-grid-background, invert($ui-grid-background), 97%);
    $resize-handle-hover-color: mix($ui-grid-resize-hover-color, $ui-grid-background, 40%);
    %resize-handle-default {
        background-color: $header-background-color;
    }

    %resize-handle-hover {
        background-color: $resize-handle-hover-color;
    }

    %resize-handle-focus {
        background-color: $resize-handle-hover-color;
    }

    %resize-handle-resizing {
        background-color: $ui-grid-resize-hover-color;
    }

    ui-grid {
        &.ui-grid-elevation-z0 {
            box-shadow: none;
        }

        @for $i from 1 through 24 {
            &.ui-grid-elevation-z#{$i} {
                .ui-grid-container {
                    @include mat.elevation($i, $ui-grid-elevation-color, 0.5);
                }
            }
        }

        &:not([class*="ui-grid-elevation-z"]) {
            .ui-grid-container {
                @include mat.elevation(4, $ui-grid-elevation-color, 0.5);
            }
        }

        &.ui-grid-state-loading {
            .ui-grid-row,
            .ui-grid-card-wrapper {
                pointer-events: none;
                opacity: 0.5;
            }
        }

        &.ui-grid-state-resizing {
            .ui-grid-resize-handle:not(.ui-grid-state-resizing) {
                @extend %resize-handle-default;
            }
        }

        &.ui-grid-state-projected {
            .ui-grid-row {
                &:hover,
                &:focus,
                &.cdk-focused {
                    &:not(.ui-grid-row-state-expanded) {
                        background-color: inherit;
                    }

                    outline: none;
                }
            }
        }

        .ui-grid-action-cell-container {
            background-color: $ui-grid-cell-background-color;

            &.sticky-grid-action-cell-container {
                opacity: 0;
            }
        }

        .ui-grid {
            &-cell {
                background: $ui-grid-cell-background-color;

                &:hover {
                    background-color: $ui-grid-row-hover-color;
                }
            }

            &-container {
                background: $ui-grid-cell-background-color;
            }

            &-container mat-paginator.mat-mdc-paginator {
                background: transparent;
            }

            &-primary {
                color: $ui-grid-primary-text-color;
            }

            &-secondary {
                color: $ui-grid-secondary-text-color;
            }

            &-header-title {
                &-filtered {
                    color: $ui-grid-accent-color;
                }
            }

            &-sticky-boundary {
                background-color: $ui-grid-border-color;
            }

            &-resize-handle {
                &.ui-grid-state-resizing {
                    background: $ui-grid-resize-hover-color;
                }

                @extend %resize-handle-default;

                &:hover {
                    @extend %resize-handle-hover;
                }
            }

            &-cell-resizing-border {
                opacity: 0;

                &.ui-grid-state-resizing {
                    opacity: 1;
                    background-color: $ui-grid-resize-hover-color;
                }
            }

            &-header-cell:not(.ui-grid-feature-cell):focus,
            &-header-cell.ui-grid-state-resizing {
                background-color: $ui-grid-header-pressed-color;
                outline: none;
            }

            &-header-cell {
                &:hover {
                    .ui-grid-resize-handle-container .ui-grid-resize-handle:not(.ui-grid-state-resizing) {
                        @extend %resize-handle-hover;
                    }
                }

                &:focus {
                    .ui-grid-resize-handle-container .ui-grid-resize-handle:not(.ui-grid-state-resizing) {
                        @extend %resize-handle-focus;
                    }
                }
            }

            &-resize-handle {
                &.ui-grid-state-resizing.ui-grid-state-resizing {
                    @extend %resize-handle-resizing;
                }
            }

            &-header-cell.ui-grid-primary {
                color: $ui-grid-primary-text-color;
            }

            &-header-row,
            &-row,
            &-row-state-expanded {
                border-bottom-color: $ui-grid-border-color;
                transition: $ui-grid-opacity-transition;
            }

            &-card-wrapper {
                transition: $ui-grid-opacity-transition;
            }
        }

        .ui-grid-row {
            &:focus,
            &:hover,
            &.cdk-focused {
                background-color: $ui-grid-row-hover-color;

                .ui-grid-header-cell,
                .ui-grid-cell {
                    background-color: $ui-grid-row-hover-color;
                }

                outline: none;

                .ui-grid-action-cell-container {
                    opacity: 1;
                    background-color: $ui-grid-row-hover-color;
                }
            }

            .grid-margin-shadow {
                position: sticky;
                right: 0;
                height: 100%;

                @if $is-dark {
                    box-shadow: -7px 20px 20px 4px #000000;
                } @else {
                    box-shadow: -3px 5px 20px 1.6px $scroll-margin-shadow-color;
                }
            }
        }

        .ui-grid-sort-icon {
            .path-asc,
            .path-desc {
                transition: $ui-grid-default-transition;
            }
        }

        .ui-grid-info-icon {
            transition: $ui-grid-default-transition;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    @include ui-grid-search-theme($theme);
}

$light-gray: rgb(234, 238, 240);
$dark-gray: rgb(51, 51, 51);
$red: rgb(207, 41, 41);
$dark-orange: rgb(255, 99, 37);
$green: rgb(124, 199, 108);

$default-success: (
    "text": $light-gray,
    "background": mix($green, $dark-gray, 80),
);
$default-warning: (
    "text": $light-gray,
    "background": mix($dark-orange, $dark-gray, 80),
);
$default-error: (
    "text": $light-gray,
    "background": mix($red, $dark-gray, 80),
);
$default-info: (
    "text": null,
    "background": null,
);
$default-snackbar-theme: (
    "success": $default-success,
    "warning": $default-warning,
    "error": $default-error,
    "info": $default-info,
);

@mixin ui-snackbar-theme($theme, $snackbar-theme) {
    @if $snackbar-theme == null {
        $snackbar-theme: $default-snackbar-theme;
    }

    $success: map-get($snackbar-theme, "success");
    $warning: map-get($snackbar-theme, "warning");
    $error: map-get($snackbar-theme, "error");
    $info: map-get($snackbar-theme, "info");

    $success-text-color: map-get($success, "text");
    $success-background-color: map-get($success, "background");
    $warning-text-color: map-get($warning, "text");
    $warning-background-color: map-get($warning, "background");
    $error-text-color: map-get($error, "text");
    $error-background-color: map-get($error, "background");
    $info-text-color: map-get($info, "text");
    $info-background-color: map-get($info, "background");

    .ui-snackbar {
        &-success,
        &-warning,
        &-error,
        &-info {
            mat-icon {
                color: inherit;
            }
        }

        &-success {
            color: $success-text-color;

            .mdc-snackbar__surface {
                background-color: $success-background-color;
            }
        }

        &-warning {
            color: $warning-text-color;

            .mdc-snackbar__surface {
                background-color: $warning-background-color;
            }
        }

        &-error {
            color: $error-text-color;

            .mdc-snackbar__surface {
                background-color: $error-background-color;
            }
        }

        &-info {
            color: $info-text-color;

            .mdc-snackbar__surface {
                background-color: $info-background-color;
            }
        }

        &-dismiss {
            .mat-mdc-icon-button:hover {
                color: inherit !important;
            }
        }
    }
}

@mixin ui-password-indicator-theme($theme) {
    $foreground: map-get($theme, "foreground");
    $background: map-get($theme, "background");
    $warn: map-get($theme, "warn");
    $primary: map-get($theme, "primary");

    $warn-color: mat.get-color-from-palette($warn);
    $warn-color-light: mat.get-color-from-palette($warn, lighter);

    $primary-color: mat.get-color-from-palette($primary);
    $disabled-color: mat.get-color-from-palette($foreground, "disabled-text");
    $background-color: mat.get-color-from-palette($background, "background");

    .mat-mdc-form-field.mat-form-field-invalid {
        ui-password-indicator {
            .mdc-linear-progress__buffer {
                background-color: $warn-color-light;
            }
            .mdc-linear-progress__bar-inner {
                border-color: $warn-color;
            }

            .mat-mdc-list {
                .mat-mdc-list-item {
                    &.ui-password-rule-invalid {
                        color: $warn-color;
                    }
                }
            }
        }
    }

    ui-password-indicator {
        .ui-password-progress-container {
            border-top-color: $background-color;
            border-bottom-color: $background-color;
        }

        .mat-mdc-list {
            .mat-mdc-list-item {
                &.ui-password-rule-invalid {
                    mat-icon {
                        color: $warn-color;
                    }
                }

                &.ui-password-rule-valid {
                    color: $disabled-color;
                    mat-icon {
                        color: $primary-color;
                    }
                }
            }
        }
    }
}

@mixin ui-file-picker-theme($theme) {
    $background: map-get($theme, "background");
    $foreground: map-get($theme, "foreground");
    $primary: map-get($theme, "primary");

    $color-primary: mat.get-color-from-palette($primary);
    $color-background: mat.get-color-from-palette($background, "background");
    $border-color: mat.get-color-from-palette($foreground, "divider");
    $color-hint: mat.get-color-from-palette($foreground, "hint-text");

    .ui-file-picker {
        .upload-wrapper {
            border-color: $border-color;
            &.ui-file-drop-zone-highlight {
                border-color: $color-primary;
            }
            .upload-input-wrapper {
                border-top-color: $border-color;
                .primary {
                    color: $color-primary;
                    .placeholder {
                        color: $color-hint;
                    }
                }
                .mat-stroked-button {
                    background: $color-background;
                }
            }
        }
    }
}


@mixin uipath-angular-theme($theme) {
    @include ui-suggest-theme($theme);
    @include ui-grid-theme($theme);
    @include ui-password-indicator-theme($theme);
    @include ui-file-picker-theme($theme);
}

@mixin uipath-snackbar-theme($theme, $snackbar-theme: null) {
    @include ui-snackbar-theme($theme, $snackbar-theme);
}