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

ng-select.custom.water-account-contact-search::ng-deep {
    .ng-dropdown-panel .ng-dropdown-header {
        padding: 0;
        font-size: $type-size-200;
        color: $gray-1000;
    }

    &.force-open .ng-arrow-wrapper {
        display: none;
    }

    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
        height: unset;
        line-height: unset;

        &:hover,
        &-selected {
            color: $gray-1000;

            .wa-name {
                color: $gray-500;
            }
        }
    }

    .button-head {
        .wac-name {
            font-size: $type-size-300;
            color: $primary;
            overflow: hidden;
            max-width: 10rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 0.25rem;
        }

        icon::ng-deep svg {
            height: 18px;
            width: 18px;
            color: $primary;
            margin-right: $spacing-100;
            transform: translateY(2px);
        }
    }

    .button-metadata {
        margin-top: $spacing-200;

        .wa-meta {
            font-size: $type-size-150;
        }
    }

    .ng-option {
        border-bottom: 1px solid $gray-200;
        padding: $spacing-300;
    }
}

:host {
    display: block;
}

// .search-container {
//     position: relative;
//     input {
//         padding-left: 3rem;
//         padding-right: 3rem;
//         font-family: inherit;

//         &:disabled {
//             background: #e5e5e5;
//             cursor: not-allowed;
//         }

//         border-radius: 0;

//         &::placeholder {
//             font-size: 0.8rem;
//         }
//     }
//     .search-prepend,
//     .search-append {
//         position: absolute;
//         height: 100%;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//     }
//     .search-prepend {
//         left: 0;
//         width: 50px;
//         pointer-events: none;
//     }
//     .search-append {
//         top: 0;
//         right: 0;
//         button.clear {
//             margin-right: 8px;
//             background: none;
//             border: none;
//             color: #444444;

//             icon {
//                 display: block;
//                 width: 10px;

//                 ::ng-deep {
//                     svg {
//                         width: 100%;
//                     }
//                 }
//             }
//             &:hover {
//                 color: #000;
//             }
//         }
//     }
// }

// .search-results {
//     position: absolute;
//     z-index: 9999;
//     box-shadow: 0px 4px 12px 0px #00000040;
//     background: #fff;

//     border: 1px solid $gray-200;

//     .refine-search {
//         width: 360px;
//     }

//     .search-item {
//         &:first-child button {
//             border-radius: 8px 8px 0 0;
//         }

//         &:last-child button {
//             border-radius: 0 0 8px 8px;
//         }

//         button {
//             padding: 1rem 1.5rem;
//             background: none;
//             border: none;
//             text-align: left;
//             width: 100%;
//             font-family: inherit;

//             &:hover,
//             &:focus {
//                 background: rgba($primary, 0.1);
//             }
//         }

//         & + .search-item {
//             border-top: 1px solid #e5e5e5;
//         }

//         &.highlighted-search-result {
//             background: rgba($primary, 0.05);
//         }
//     }

//     .button-head {
//         display: flex;
//         align-items: center;
//         gap: 0.25rem;

//         svg {
//             path {
//                 fill: $primary;
//             }
//         }
//     }
// }

// .wa-name {
//     font-size: $type-size-300;
//     color: $primary;
//     padding-left: 0.25rem;
// }

// .wa-id {
//     font-size: $type-size-100;
//     color: $gray-default;
//     overflow: hidden;
//     max-width: 10rem;
//     text-overflow: ellipsis;
//     white-space: nowrap;
// }

// .wa-parcels,
// .wa-acres {
//     font-size: $type-size-200;
// }

// .wa-acres {
//     padding-left: 0.125rem;
// }

// .wa-meta {
//     font-size: $type-size-150;
// }
