@use "/src/scss/abstracts" as *;

.ng-select {
    .ng-select-container {
        .ng-value-container {
            height: 100%;
            input[type="text"] {
                max-height: 36px;
            }
        }
    }
}

#currentWaterAccount {
    .ngx-dropdown-list-container {
        padding: 0;

        @include desktop-small {
            width: 400px;
            top: 2rem !important;
        }

        .search-container {
            padding: 1rem;
            margin-top: 0;
            display: flex;
            flex-direction: column;

            label {
                text-transform: none;
                letter-spacing: none;
                color: $black;
                font-size: $type-size-050;
                font-weight: bold;
                text-transform: uppercase;
                padding: 0 0 0.25rem 0;
                position: static;
                top: unset;
                left: unset;
                order: -1;
                transform: none;
            }

            input {
                padding: 0.5rem 1rem;
                border: 1px solid rgba($black, 0.1);
                border-radius: 2rem;
                height: auto;
                box-sizing: border-box;
                font-family: inherit;
                font-size: $type-size-150;

                &:active,
                &:focus {
                    border: 1px solid rgba($black, 0.1);
                }
            }
        }

        hr {
            margin: 0;
        }

        .available-items,
        .selected-items {
            margin: 0;
        }

        .selected-items {
            display: none;
        }

        .selected-item {
            border-top: 1px solid rgba($black, 0.1);
            line-height: 1em;
            padding: 1rem 1rem 0.875rem 1rem;
            margin: 0;
            background: rgba($primary, 0.1);

            .switcher-header {
                display: flex;
                align-items: center;
                gap: 0 0.5rem;

                &:before {
                    display: block;
                    font-family: "Font Awesome 5 Free";
                    content: "\f057";
                    color: $black;
                }
            }
        }

        .available-item {
            line-height: 1em;
            padding: 1rem 1rem 0.875rem 1rem;
            margin: 0;
            border-bottom: 1px solid rgba($black, 0.1);
            color: $primary;
            transition: all 100ms ease;

            &:hover {
                background: $primary;

                .switcher {
                    &-name {
                        color: $white;
                    }

                    &-id {
                        color: $white;
                    }

                    &-geography {
                        background: $white;
                        color: $primary;
                    }
                }
            }

            & + .switcher-no-results {
                display: none;
            }
        }
    }
}

//MK 5/6/2025: These !importants are insavory but necessary to override the default styles of ng-select in all cases. The ng-deep version of this before was not working for the User Edit Model Access dialog.
.ng-select.ng-select-multiple.custom .ng-value {
    background: $blue-50 !important;
    border: 1px solid $blue-200 !important;
    color: $blue-700 !important;
    border-radius: $spacing-100 !important;
}

.ng-select.ng-select-multiple.custom .ng-value-label {
    padding: $spacing-200 !important;
    padding-top: 10px !important;
    padding-left: 0 !important;
    font-weight: 600 !important;
}

.ng-select.ng-select-multiple.custom .ng-value-icon {
    padding: $spacing-200 !important;
    padding-top: 10px !important;
    border-right: unset !important;

    &:hover {
        background: $blue-100 !important;
    }
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
    top: 1rem !important;
}

.custom.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    height: 3rem;
    line-height: 2.25rem;
}

.custom.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    &.ng-option-selected,
    &:hover {
        background: $blue-50;
        color: $blue-700;
    }
}

.ng-select.custom {
    .ng-select-container {
        height: 3rem;
        border-color: $gray-200;
    }

    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
        height: 3rem;
        line-height: 2.25rem;
    }

    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
        &.ng-option-selected,
        &:hover {
            background: $blue-50;
            color: $blue-700;
        }
    }

    .ng-clear-wrapper {
        padding-inline: $spacing-200;
        display: inline-block;
        width: unset;
        .ng-clear {
            font-size: 24px;
            top: 3px;
            position: relative;
        }
    }

    .ng-arrow-wrapper {
        padding-inline: $spacing-300;
        display: inline-block;
        width: unset;

        .ng-arrow {
            top: 2px;
            position: relative;
            border-width: 7px 6px 2.5px;
        }
    }

    &.small {
        .ng-select-container {
            height: 1rem;
        }

        .ng-value {
            top: 1px;
        }
    }

    &.small.ng-touched.ng-select-searchable {
        .ng-value {
            top: 6px;
        }
    }

    &.small.ng-select-opened.ng-select-searchable {
        .ng-value {
            top: 6px;
        }
    }
}

//MK 5/6/2025: Multiple selects can grow and if they have a height set, not all options are visible. This is a workaround to set the height to unset so that the select can grow and show all options.
.ng-select.ng-select-multiple.custom {
    .ng-select-container {
        height: unset;
    }
}

.ng-select.custom.ng-select-opened > .ng-select-container .ng-arrow {
    border-width: 0 6px 7px;
    top: 0;
}
