@use "../variable" as *;

.rbfb-top-level-wrapper {
    .rbfb-preloader {
        svg {
            width: 80%;
            height: 80%;
        }
    }

    .rbfb-preloader-active {
        box-shadow: inset 0 0 0px 2px $primary;
    }

    .rbfb-integration-icon {
        svg {
            width: 40px !important;
            height: 40px !important;
        }
    }

    .rbfb-integration-card {
        position: relative;

        .rbfb-integration-card-tooltip {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);

            z-index: 9999;
            pointer-events: none;

            background: $gray-800;
            color: $white;
            border-radius: 4px;
            padding: 6px 10px;
            white-space: nowrap;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

            opacity: 0;
            animation: rbfb-tooltip-fade-in 0.2s ease forwards;

            &::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 5px solid transparent;
                border-top-color: $gray-800;
            }
        }
    }

    @keyframes rbfb-tooltip-fade-in {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(4px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    // ── Settings Search ─────────────────────────────────────────
    .rbfb-settings-search {
        &__trigger {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 40px;
            padding: 0 10px;
            border: 1px solid $gray-200;
            border-radius: 6px;
            background: $gray-50;
            cursor: pointer;
            transition: background 0.15s ease;

            &:hover {
                background: $gray-100;
            }
        }

        &__trigger-hint {
            display: flex;
            align-items: center;
            gap: 1px;

            kbd {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 16px;
                height: 16px;
                padding: 0 2px;
                font-size: 10px;
                font-family: inherit;
                background: $white;
                border: 1px solid $gray-300;
                border-radius: 3px;
                color: $gray-500;
                line-height: 1;
                font-weight: 500;
            }
        }

        &__backdrop {
            position: fixed;
            inset: 0;
            z-index: 999999;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 10vh;
            background: rgba(0, 0, 0, 0.4);
        }

        &__modal {
            width: 100%;
            max-width: 560px;
            background: $white;
            border-radius: 14px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            max-height: 60vh;
        }

        &__modal-input {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            border-bottom: 1px solid $gray-200;

            input {
                flex: 1;
                border: none;
                outline: none;
                background: transparent;
                font-size: 15px;
                color: $gray-800;
                font-family: inherit;

                &::placeholder {
                    color: $gray-400;
                }
                &:focus {
                    outline: none;
                    box-shadow: none;
                }
            }
        }

        &__modal-results {
            flex: 1;
            overflow-y: auto;
            padding: 8px 12px;
            scrollbar-width: none;
        }

        &__modal-footer {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 10px 20px;
            border-top: 1px solid $gray-200;
            background: $gray-50;
        }

        &__shortcut {
            display: flex;
            align-items: center;
            gap: 4px;

            kbd {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 20px;
                height: 20px;
                padding: 0 4px;
                font-size: 11px;
                font-family: inherit;
                background: $white;
                border: 1px solid $gray-300;
                border-radius: 4px;
                color: $gray-600;
                line-height: 1;
            }

            span {
                font-size: 11px;
                color: $gray-500;
                margin-left: 2px;
            }
        }

        &__divider {
            height: 1px;
            background: $gray-200;
            margin: 4px 0;
        }

        &__group-label {
            padding: 6px 8px 4px;
        }

        &__item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            cursor: pointer;
            user-select: none;
            transition: background 0.1s ease;

            &:hover,
            &--active {
                background: $gray-100;
            }
        }

        &__item-icon {
            flex-shrink: 0;
            display: flex;
        }

        &__item-title {
            min-width: 0;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        &__empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 32px 16px;
        }

        &__highlight {
            background: $primary-light;
            color: $primary;
            border-radius: 2px;
            padding: 0 2px;
        }
    }
}
