
// reset styles
#stg-select-group-popup-wrapper,
#stg-select-group-popup-wrapper div {
    width: unset;
    margin: unset;
    padding: unset;
    border-radius: unset;
    background-color: unset;
    box-shadow: unset;
}

#stg-select-group-popup-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    z-index: 2147483647;

    --text-color: #000;
    --background-color: #fbfbfb;
    --text-focus-color: #bababa;
    --background-focus-color: #91c9f7;
    --fill-group-icon-color: #5d5d5d;

    &[data-theme="dark"] {
        --text-color: #e0e0e0;
        --background-color: #444444;
        --text-focus-color: #575757;
        --background-focus-color: rgba(159, 159, 159, 0.3);
        --fill-group-icon-color: var(--text-color);
    }

    --font-size: 16px;

    .stg-popup-has-text {
        color: var(--text-color) !important;
        font-family: Arial, sans-serif;
        font-size: var(--font-size) !important;
        font-weight: normal;
        line-height: calc(var(--font-size) * 1.5) !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stg-popup-main {
        background-color: var(--background-color) !important;
        border-radius: 5px;
        padding: 10px;
        min-width: 600px;
        max-width: 75vw;
        white-space: nowrap;

        .stg-popup-header {
            text-align: center;
            outline: none;
        }

        .stg-popup-groups-wrapper {
            overflow-y: auto;
            min-height: 150px;
            max-height: calc(100vh - 100px);
            scrollbar-width: thin;

            .stg-popup-group {
                display: flex;
                align-items: center;
                height: calc(var(--font-size) * 2);
                margin: 4px 0 0 0;
                padding: 0 5px;
                border-radius: 3px;
                cursor: default;
                outline: none;
                overflow: hidden;

                &:not(.stg-popup-disabled):hover,
                &:not(.stg-popup-disabled):focus {
                    color: var(--text-focus-color) !important;
                    background-color: var(--background-focus-color) !important;
                }

                &.stg-popup-disabled {
                    cursor: not-allowed;

                    span {
                        color: GrayText !important;
                    }
                }

                img {
                    width: 16px;
                    min-width: 16px;
                    height: 16px;
                    min-height: 16px;
                    position: relative !important;
                    -moz-context-properties: fill;
                }

                .group-icon img/*,
                img.archive-icon*/ {
                    fill: var(--fill-group-icon-color) !important;
                }

                figure {
                    position: relative;
                    margin: 0;
                    line-height: 0;
                    height: 16px;
                    width: 16px;
                }

                .is-sticky::after {
                    content: '📌';
                    position: absolute;
                    top: -5px;
                    right: -5px;
                    font-size: 10px !important;
                    line-height: 1 !important;
                }

                * + * {
                    margin: 0 0 0 7px !important;
                }
            }
        }
    }
}
