app-global-search {
    ion-header {
        ion-toolbar {
            display: flex;
            justify-content: space-between;

            ion-icon {
                margin-right: var(--ion-margin-10);
                color: #fff;
                float: right;
            }
        }

        ion-item {
            &.search {
                margin: var(--ion-margin-0);

                ion-input {
                    height: inherit;
                    flex: 0 0 90%;

                    input {
                        padding: var(--ion-padding-10) !important;
                    }
                }

                ion-icon {
                    position: absolute;
                    right: 2px;
                    font-size: 22px;
                    z-index: 99;
                }

                ion-button {
                    width: 48%;
                    margin: var(--ion-margin-0);

                    &:last-child {
                        margin-left: 4%;

                        &::part(native) {
                            --background: var(--ion-content-color);
                        }
                    }

                    &::part(native) {
                        min-height: 30px;
                        height: 30px;
                    }
                }

                &:last-child {
                    padding-top: var(--ion-padding-10);
                }
            }
        }
    }

    ion-content {
        .bg {
            background: var(--ion-background-content);
            padding-bottom: var(--ion-padding-15);
            min-height: 90%;

            ion-segment {
                margin: var(--ion-margin-0) var(--ion-margin-0) var(--ion-margin-15);
                background: var(--ion-color-white);
                width: auto;
                justify-content: space-between;
                box-shadow: 2px 2px 7px #ebebeb;
                position: fixed;
                width: 100%;
                z-index: 9;

                ion-segment-button {
                    margin: var(--ion-margin-0);
                    padding: var(--ion-padding-0);
                    min-width: 33.33%;
                    width: fit-content;
                    flex: inherit;
                    min-height: 40px;
                    width: 100%;

                    ion-label {
                        margin: 8px var(--ion-margin-0);
                        text-transform: capitalize;
                        line-height: inherit;
                        font-size: var(--ion-font-size-14);
                    }

                    &.segment-button-checked {
                        color: var(--ion-color-sant);

                        &::part(indicator) {
                            --indicator-color: var(--ion-color-sant);
                        }

                        ion-label {
                            color: var(--ion-color-sant);
                        }
                    }

                    &:nth-child(2) {
                        &.segment-button-checked {
                            color: var(--ion-color-sangh);

                            &::part(indicator) {
                                --indicator-color: var(--ion-color-sangh);
                            }

                            ion-label {
                                color: var(--ion-color-sangh);
                            }
                        }
                    }

                    &:nth-child(3) {
                        &.segment-button-checked {
                            color: var(--ion-color);

                            &::part(indicator) {
                                --indicator-color: var(--ion-color);
                            }

                            ion-label {
                                color: var(--ion-color);
                            }
                        }
                    }
                }
            }

            .bottom-bg-location {
                padding: var(--ion-padding-40) var(--ion-padding-0) var(--ion-padding-15);
            }

            ion-list {
                padding: var(--ion-padding-0) !important;
                border-top: 1px solid #efefef;

                ion-item {
                    margin: var(--ion-margin-0);
                    padding: 5px var(--ion-padding-15);
                    border-bottom: 1px solid #eee;

                    ion-avatar {
                        margin: var(--ion-margin-0) var(--ion-margin-10) var(--ion-margin-0) var(--ion-margin-0);
                        background: #efefef;
                        align-items: center;
                        overflow: hidden;
                        width: 40px;
                        height: 40px;

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    ion-label {
                        margin: var(--ion-margin-0);
                        line-height: initial;
                        white-space: normal !important;

                        h2 {
                            font-weight: 600;
                            font-size: var(--ion-font-size-14);

                            span {
                                display: block;
                                font-size: var(--ion-font-size-12);
                                color: #aaa;
                                text-overflow: inherit;
                                overflow: inherit;
                                font-weight: 400;
                            }
                        }
                    }

                    ion-chip {
                        padding: 5px;
                        height: auto;
                        margin: 0;
                        background: var(--ion-color);
                        color: #fff;
                        font-size: var(--ion-font-size-12);
                        border-radius: 5px;

                        ion-label {
                            font-size: var(--ion-font-size-12) !important;
                        }

                        &.friends {
                            background: var(--ion-color-success);
                        }

                        &.requested {
                            background: var(--ion-background-button);
                            color: var(--ion-color);
                        }

                        &.respond {
                            background: var(--ion-background-button);
                            color: var(--ion-color);
                        }
                    }
                }
            }

            .sangh {
                ion-list {
                    ion-item {
                        ion-chip {
                            background: var(--ion-color-sangh);

                            &.requested {
                                background: var(--ion-background-content-sangh);
                                color: var(--ion-color-sangh);
                            }

                            &.member {
                                background: var(--ion-color-success);
                            }
                        }
                    }
                }
            }

            .sant {
                ion-list {
                    ion-item {
                        ion-chip {
                            background: var(--ion-color-sant);

                            &.following {
                                background: var(--ion-content-color-sant);
                                color: white;
                            }
                        }
                    }
                }
            }
        }

        h3 {
            color: var(--ion-color);
        }
    }
}

ion-modal {
    &.global-filter {
        --height: 350px;
        align-items: flex-end;
        --height: calc(350px + env(safe-area-inset-bottom));

        &.sant {
            --height: 450px;
            --height: calc(450px + env(safe-area-inset-bottom));
        }

        ion-content {
            ion-button {
                margin: var(--ion-margin-0);

                &::part(native) {
                    --background: var(--ion-color);
                }
            }

            ion-item {
                &:first-child {
                    margin-top: var(--ion-margin-10);
                }

                ion-select,
                ionic-selectable {
                    height: 2.813rem;
                }
            }

            input {
                width: 100%;
                display: flex;
                align-items: center;
                padding-left: 5px;
                font-size: 12px;
                border: 1px solid var(--ion-content-color);
                border-radius: 0.25rem;
                height: 2.813rem;
                background: transparent;
            }

            h4 {
                font-size: var(--ion-font-size-18);
                color: var(--ion-color);
            }

            &.sant {
                ion-button {
                    &::part(native) {
                        --background: var(--ion-color-sant);
                    }
                }

                h4 {
                    color: var(--ion-color-sant);
                }
            }

            &.sangh {
                ion-button {
                    &::part(native) {
                        --background: var(--ion-color-sangh);
                    }
                }

                h4 {
                    color: var(--ion-color-sangh);
                }

                ion-item {

                    ion-input,
                    ion-text,
                    input {
                        border: 1px solid var(--ion-background-content-sangh);
                    }

                    ion-select,
                    ion-textarea,
                    ionic-selectable {
                        border: 1px solid var(--ion-background-content-sangh);
                        padding: var(--ion-padding-10) !important;
                    }
                }
            }

            .filter-btn {
                padding: var(--ion-padding-0) var(--ion-padding-15);

                ion-button {
                    width: 48%;

                    &:last-child {
                        margin-left: 4%;

                        &::part(native) {
                            --background: var(--ion-content-color);
                        }
                    }
                }
            }
        }
    }
}

.auto-location {
    .pac-container {
        bottom: 125px !important;
        top: auto !important;
    }

    ionic-selectable-modal {
        ion-button {
            &::part(native) {
                --background: var(--ion-color-sangh);
            }
        }

        ion-content {
            ion-list {
                ion-item {
                    ion-icon {
                        &.ion-color-primary {
                            --ion-color-base: var(--ion-color-sangh) !important;
                        }
                    }

                    ion-label {
                        white-space: normal !important;
                    }
                }
            }
        }
    }
}

.search-selectable {
    ionic-selectable-modal {
        ion-button {
            &::part(native) {
                --background: var(--ion-color-sant);
            }
        }

        ion-content {
            ion-list {
                ion-item {
                    ion-icon {
                        &.ion-color-primary {
                            --ion-color-base: var(--ion-color-sant) !important;
                        }
                    }

                    ion-label {
                        white-space: normal !important;
                    }
                }
            }
        }
    }
}

.show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ion-color);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    min-height: 46px;
    border-bottom: 1px solid #eeeeee;
    background: var(--ion-color-white);
}

.sant-available-count {
    display: block;
    font-size: var(--ion-font-size-12);
    color: #aaa;
    text-align: center;
    padding: 10px;
}