// @import url("../../../../../xdce-widget/partial_scss/lib/nbp/scss/_widget-ui.style.scss");

$btn-map: (
    primary-bg-color: map-get($orange-palette, 100),
    primary-border-color: map-get($orange-palette, 100),
    primary-color: map-get($white-palette, 100),
    primary-bg-color-h: map-get($orange-palette, 150),
    primary-border-color-h: map-get($orange-palette, 150),

    secondary-bg-color: map-get($white-palette, 100),
    secondary-border-color: map-get($orange-palette, 100),
    secondary-color: map-get($orange-palette, 100),
    secondary-bg-color-h: map-get($gray-palette, 100),
);

$checkbox-map: (
    checked-bg-color: map-get($gray-palette, 150),
    border-color: map-get($gray-palette, 150),
    unchecked-bg-color: map-get($white-palette, 100)
);

@mixin isp-button-colors($name,
    $bg-color, $border-color, $color,
    $bg-color-h, $border-color-h, $color-h,
    $bg-color-a, $border-color-a, $color-a,
    $bg-color-o, $border-color-o, $color-o,
    $bg-color-oh, $border-color-oh, $color-oh,
) {
    .isp-button#{if($name != "", ".isp-" + $name, "")} {
        background-color: $bg-color;
        border-color: $border-color;
        color: $color;

        &.on,
        &:hover:not([disabled]):not(.touch) {
            background-color: $bg-color-h;
            border-color: $border-color-h;
            color: $color-h;
        }

        &:active {
            background-color: $bg-color-a;
            border-color: $border-color-a;
            color: $color-a;
        }

        &:disabled {
            opacity: 0.5;
        }

        &.outline-style {
            background-color: $bg-color-o;
            border-color: $border-color-o;
            color: $color-o;

            &.on,
            &:hover:not([disabled]):not(.touch) {
                background-color: $bg-color-oh;
                border-color: $border-color-oh;
                color: $color-oh;
            }

            &:disabled {
                opacity: 0.5;
            }
        }
    }
}

body {
    background: map-get($gray-palette, 25);
}

#fideuram .widget-fideuram {
    *[class*="-mode-wrapper"] {
        @include isp-button-colors("primary",
            map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
            map-get($btn-map, "primary-bg-color-h"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-color"),
            map-get($btn-map, "primary-bg-color-h"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-color"),
            map-get($btn-map, "primary-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-bg-color"),
            map-get($btn-map, "primary-color"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-bg-color-h"));

        @include isp-button-colors("secondary",
            map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
            map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"), );
    }

    nbp-button {
        @include isp-button-colors("",
            transparent, transparent, map-get($btn-map, "primary-border-color"),
            map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
            transparent, transparent, map-get($btn-map, "primary-border-color"),
            map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
            map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"));
    }

    nbp-fid-button-bar {
        .nbp-fid-button-bar>*:not(:last-child) {
            .isp-corporate-mode-wrapper {
                .isp-button {
                    border-right-color: map-get($white-palette, 100);
                }
            }
        }

        nbp-button .isp-corporate-mode-wrapper {
            @include isp-button-colors("",
                map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
                map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
                map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
                map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
                map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200));
        }
    }

    nbp-button-generation .isp-corporate-mode-wrapper {
        .isp-default {
            .button-container .button-icon {
                color: map-get($blue-palette, 100);
            }

            .button-label,
            .button-label-icon {
                color: map-get($blue-palette, 100);
            }
        }

        .isp-primary {
            .button-container .button-icon {
                color: map-get($orange-palette, 100);
            }

            .button-label,
            .button-label-icon {
                color: map-get($orange-palette, 100);
            }
        }

        .isp-secondary {
            .button-container .button-icon {
                color: map-get($blue-palette, 100);
            }

            .button-label,
            .button-label-icon {
                color: map-get($blue-palette, 100);
            }

            &:hover {
                .button-container .button-icon {
                    color: map-get($orange-palette, 100);
                }

                .button-label,
                .button-label-icon {
                    color: map-get($orange-palette, 100);
                }
            }
        }
    }

    nbp-checkbox .isp-corporate-mode-wrapper {
        & .checked .isp-checkbox-input {
            background-color: map-get($blue-palette, 150) !important;
            border-color: map-get($blue-palette, 150) !important;

            &:hover {
                background-color: map-get($blue-palette, 200) !important;
                border-color: map-get($blue-palette, 200) !important;
            }
        }

        & .isp-primary.checked .isp-checkbox-input {
            background-color: map-get($blue-palette, 150) !important;
            border-color: map-get($blue-palette, 150) !important;   

            &:hover {
                background-color: map-get($blue-palette, 200) !important;
                border-color: map-get($blue-palette, 200) !important;
            }
        }

        .checkbox-label {
            color: map-get($gray-palette, 150);
        }

        .isp-checkbox-input {
            border-color: map-get($gray-palette, 150) !important;
            background-color: map-get($white-palette, 100);

            .check-icon svg {
                fill: map-get($white-palette, 100);
            }
        }
    }

    nbp-radio .isp-corporate-mode-wrapper {
        .radio-label {
            color: map-get($gray-palette, 150);
        }

        & .checked .isp-radio-input {
            border-color: map-get($gray-palette, 150);

            &:hover {
                border-color: map-get($gray-palette, 200);
            }
        }

        & .isp-primary {
            .radio-label {
                color: map-get($orange-palette, 100);
            }

            &.checked .isp-radio-input {
                border-color: map-get($blue-palette, 100);

                .circle-icon {
                    background-color: map-get($blue-palette, 100);

                    &:hover {
                        border-color: map-get($blue-palette, 100);
                    }
                }

                &:hover {
                    border-color: map-get($blue-palette, 100);
                }
            }

            &.checked .radio-label {
                color: map-get($blue-palette, 100);
            }
        }

        .isp-radio-input {
            border-color: map-get($gray-palette, 150);
            background-color: map-get($white-palette, 100);

            .circle-icon {
                background-color: map-get($gray-palette, 150);
            }
        }
    }

    .nbp-tab-bar-title {
        .tab-bar-title {
            color: map-get($gray-palette, 200);
        }
    }

    nbp-modal .isp-corporate-mode-wrapper {
        .isp-modal-close {
            color: map-get($blue-palette, 100);
        }

        .isp-modal-container {
            padding: unset;
        }

        .nbp-modal-title {
            color: map-get($blue-palette, 100);

            &:before {
                border-color: map-get($blue-palette, 100);
            }
        }
    }

    nbp-tooltip .isp-corporate-mode-wrapper {

        .tooltip-content,
        .popover-content {
            border-color: map-get($gray-palette, 75);
            background-color: map-get($white-palette, 100);
            color: map-get($gray-palette, 150);

            .tooltip-title {
                color: map-get($gray-palette, 150);
            }
        }

        .tooltip-content {
            &.top {
                border-bottom-color: map-get($gray-palette, 75);

                &:after {
                    border-top-color: map-get($gray-palette, 75);
                }
            }

            &.right {
                border-left-color: map-get($gray-palette, 75);

                &:after {
                    border-right-color: map-get($gray-palette, 75);
                }
            }

            &.bottom {
                border-top-color: map-get($gray-palette, 75);

                &:after {
                    border-bottom-color: map-get($gray-palette, 75);
                }
            }

            &.left {
                border-right-color: map-get($gray-palette, 75);

                &:after {
                    border-left-color: map-get($gray-palette, 75);
                }
            }
        }

        .isp-primary {

            .tooltip-content,
            .popover-content {

                &,
                &.top,
                &.right,
                &.bottom,
                &.left {
                    border-color: map-get($blue-palette, 100);
                }

                &.top:after {
                    border-top-color: map-get($blue-palette, 100);
                }

                &.right:after {
                    border-right-color: map-get($blue-palette, 100);
                }

                &.bottom:after {
                    border-bottom-color: map-get($blue-palette, 100);
                }

                &.left:after {
                    border-left-color: map-get($blue-palette, 100);
                }
            }
        }
    }

    nbp-tab-bar .isp-corporate-mode-wrapper .isp-tab-bar {
        .tab-container {
            border-right-color: map-get($gray-palette, 75);

            .tab-title {
                color: map-get($orange-palette, 100);
            }

            &.selectedTab {
                .tab-title {
                    color: map-get($blue-palette, 100);
                }
            }
        }
    }

    nbp-card .isp-corporate-mode-wrapper {
        .isp-card-container.isp-card.isp-default {
            border-color: map-get($gray-palette, 75);
        }

        h3.isp-card-title {
            color: map-get($blue-palette, 100);
            border-color: map-get($blue-palette, 100) !important;
        }
    }

    nbp-input-text .isp-corporate-mode-wrapper .isp-input-text {
        input.textfield-box {
            border-color: map-get($gray-palette, 75);

            &:focus,
            &:active {
                border-color: map-get($blue-palette, 75);
            }

            &::placeholder {
                color: map-get($gray-palette, 100);
            }
        }
    }

    .isp-corporate-mode-wrapper .isp-disabled {
        background-color: map-get($gray-palette, 75);
        color: map-get($gray-palette, 150)
    }

    nbp-calendar-generic .isp-corporate-mode-wrapper .isp-calendar-generic {
        .dropdown-menu {
            border-color: map-get($gray-palette, 75);
        }

        &.isp-disabled {
            input.form-control {
                background-color: map-get($gray-palette, 75);
                color: map-get($gray-palette, 150)
            }
        }

        input.form-control {
            border-color: map-get($gray-palette, 100);

            &[disabled] {
                background-color: map-get($gray-palette, 75);
                color: map-get($gray-palette, 150);
                border-color: map-get($gray-palette, 100) !important;
            }

            &:focus,
            &:active {
                border-color: map-get($blue-palette, 75);

                ~.button-icon {
                    border-color: map-get($blue-palette, 75);
                }
            }
        }

        .button-icon {
            border-left-color: map-get($gray-palette, 100);
            color: map-get($gray-palette, 200);

            &:hover {
                background-color: map-get($gray-palette, 75);
            }

            &.disabled {
                background-color: map-get($white-palette, 100);
            }
        }

        @mixin fid-date-picker-decorator-color() {
            border-color: map-get($gray-palette, 100);
            color: map-get($gray-palette, 200);

            &:hover {
                background-color: map-get($gray-palette, 75);
            }
        }

        .isp-main-datepicker {
            border-color: map-get($gray-palette, 75);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        }

        .btn.btn-link.camillo {
            //border frecce
            @include fid-date-picker-decorator-color();
        }

        .ngb-dp-month-name {
            color: map-get($gray-palette, 200);
        }

        .header-navigation-date {
            @include fid-date-picker-decorator-color();
        }

        .ngb-dp-weekday {
            //giorni settimane
            color: map-get($gray-palette, 150) !important;

            &:before {
                background-color: map-get($gray-palette, 75);
            }
        }

        .isp-datepicker-routing-view .d-flex {
            border-color: map-get($gray-palette, 75);
        }

        .ngb-dp-day {

            //giorni in numero
            &:not(.hidden) {
                @include fid-date-picker-decorator-color();

                &>div {
                    color: map-get($gray-palette, 200);
                }
            }

            &:hover {
                background-color: map-get($gray-palette, 75);
            }


            // &.disabled {
            //     color: map-get($gray-palette, 200) !important;
            //     background-color: map-get($gray-palette, 75) !important;
            // }

            &:has(.is-today) {
                color: map-get($blue-palette, 100) !important;

                &:hover {
                    color: map-get($gray-palette, 200);
                    background-color: map-get($gray-palette, 100);
                    border-color: map-get($gray-palette, 150);
                }
            }

            &:has(.bg-primary) {
                background-color: map-get($blue-palette, 75);
                color: map-get($white-palette, 100);

                &>div {
                    background-color: map-get($blue-palette, 75) !important;
                    color: map-get($white-palette, 100) !important;
                }
            }
        }
    }

    nbp-combo,
    nbp-combo-filter,
    nbp-combo-multi {

        .isp-corporate-mode-wrapper .isp-combo,
        .isp-corporate-mode-wrapper .isp-combo-filter,
        .isp-corporate-mode-wrapper .isp-combo-multi {
            input.form-control {
                border-color: map-get($gray-palette, 100);

                &:focus,
                &:active {
                    border-color: map-get($blue-palette, 75);
                }
            }

            .dropdown-button {
                .arrow-bottom {
                    border-color: map-get($gray-palette, 200) transparent transparent transparent !important;
                }

                .arrow-top {
                    border-color: transparent transparent map-get($gray-palette, 200) transparent;
                }
            }

            .dropdown-list-wrapper {
                border-color: map-get($gray-palette, 150);
            }
        }
    }

    nbp-combo,
    nbp-combo-filter {

        .isp-corporate-mode-wrapper .isp-combo,
        .isp-corporate-mode-wrapper .isp-combo-filter {
            .dropdown-list-item {
                &:hover {
                    background-color: map-get($gray-palette, 150);
                    color: map-get($white-palette, 100);
                }
            }
        }
    }

    nbp-combo-multi .isp-corporate-mode-wrapper {
        .isp-combo-multi .dropdown-list>.dropdown-list-item:first-child {
            background: map-get($gray-palette, 75);
        }

        .isp-combo-multi .dropdown-list-wrapper {
            border-color: map-get($gray-palette, 100);
        }

        .dropdown-list {
            >.dropdown-list-item:not(:first-child) {
                border-color: map-get($gray-palette, 100);
            }
        }

        .isp-combo-multi input {
            background-color: map-get($gray-palette, 75);
        }

        .dropdown-container:before {
            background-color: map-get($blue-palette, 150);
            border-color: map-get($blue-palette, 150);

            &:hover {
                background-color: map-get($blue-palette, 200);
                border-color: map-get($blue-palette, 200);
            }
        }
    }

    nbp-toggle .isp-corporate-mode-wrapper {
        .isp-primary .div-toggle-barra.truck.active-toggle {
            background: map-get($orange-palette, 100);
            border-color: map-get($orange-palette, 100);
        }

        .div-toggle-barra.truck.active-toggle {
            background: map-get($gray-palette, 150);
            border-color: map-get($gray-palette, 150);
        }

        .div-toggle-barra.truck {
            background-color: map-get($white-palette, 100);
            border-color: map-get($gray-palette, 100);
            transition: all .5;
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
        }

        .div-toggle-slider.thumb {
            border-color: map-get($gray-palette, 100);
            background: map-get($white-palette, 100);
        }
    }

    nbp-fid-toggle-tabset .isp-corporate-mode-wrapper,
    nbp-toggle-tabset .isp-corporate-mode-wrapper {
        .tabs-container {
            >.tab-element.cursor-pointer:not(:last-child) {
                border-right-color: map-get($gray-palette, 100);
            }

            .tab-element.cursor-pointer {
                &.active .tab-title {
                    color: map-get($blue-palette, 100);
                }
            }

            .tab-title {
                color: map-get($orange-palette, 100);
            }
        }
    }

    nbp-textarea textarea {
        border-color: map-get($gray-palette, 75);
        color: map-get($gray-palette, 150);

        &:focus,
        &:active {
            border-color: map-get($blue-palette, 75);
        }
    }

    nbp-accordion .isp-corporate-mode-wrapper .isp-accordion {
        border: 1px solid map-get($gray-palette, 100);

        .accordion-header {
            background-color: map-get($white-palette, 100);
            color: map-get($blue-palette, 100);
            border-bottom-color: map-get($blue-palette, 100) !important;
        }

        .accordion-arrow {
            color: map-get($blue-palette, 100);
        }

        .accordion-body {
            color: map-get($gray-palette, 150);
        }
    }

    isp-turbo-table .isp-corporate-mode-wrapper .isp-turbo-table,
    nbp-table .isp-corporate-mode-wrapper .isp-table {
        table {
            thead {

                th.table-label,
                th.header-table-class {
                    color: map-get($gray-palette, 150);
                    background: map-get($white-palette, 100);
                    border-bottom-color: map-get($gray-palette, 50);
                }
            }

            tbody {

                tr.table-row,
                tr.isp-table-row {
                    color: map-get($gray-palette, 150);
                    background: map-get($white-palette, 100);
                    
                    td.table-cell,
                    td.isp-common-column,
                    td.td-accordion-row {
                        color: map-get($gray-palette, 150);
                        border-bottom-color: map-get($gray-palette, 50) !important;
                    }
                }

                tr.isp-table-row.isp-corporate-mode-wrapper:has(.row-expander-column-content) {
                    td {
                        background-color: map-get($gray-palette, 50);
                    }

                    &:has(.isp-common-column[style*="padding-left: 40px;"]) td {
                        background-color: map-get($gray-palette, 25);
                    }
                }
            }
        }
    }

    isp-spinner {
        .spinner::after {
            background: map-get($black-palette, 200);
            opacity: 0.3;
        }

        #canvasLoader {
            background: map-get($white-palette, 100);
            border-color: map-get($gray-palette, 150);
        }

        #canvasLoader::after {
            color: map-get($orange-palette, 100);
        }
    }
}

.ag-theme-balham {
    color: map-get($gray-palette, 150);

    .ag-header {
        background-color: map-get($white-palette, 100);
        border-color: map-get($gray-palette, 50);
        color: map-get($gray-palette, 150);
    }

    .ag-row:not(.ag-row-first) {
        border-color: map-get($gray-palette, 50);
    }

    .ag-row-odd {
        background-color: map-get($white-palette, 100);
    }
}