// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0

@use "../mixins.scss";

.type-ahead-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: var(--zindex-typeahead-modal-backdrop);
}

.type-ahead-modal {
    position: absolute;
    z-index: var(--zindex-typeahead-modal);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 6px;
    border: 1px solid var(--modal-border-color);
    background: var(--modal-bg-color);
    box-shadow: 0px 13px 16px 0px rgba(0, 0, 0, 0.4);
    padding: 6px;
    flex-direction: column;

    .label {
        opacity: 0.5;
        font-size: 13px;
        white-space: nowrap;
    }

    .input {
        border: none;
        border-bottom: none;
        height: 24px;
        border-radius: 0;

        input {
            width: 100%;
            flex-shrink: 0;
            padding: 4px 6px;
            height: 24px;
        }

        .input-decoration.end-position {
            margin: 6px;

            i {
                opacity: 0.3;
            }
        }
    }

    &.has-suggestions {
        .input {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
    }

    .suggestions-wrapper {
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .suggestion-header {
            font-size: 11px;
            font-style: normal;
            font-weight: 500;
            line-height: 12px;
            opacity: 0.7;
            letter-spacing: 0.11px;
            padding: 4px 0px 0px 4px;
        }

        .suggestion-item {
            width: 100%;
            cursor: pointer;
            display: flex;
            padding: 6px 8px;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            border-radius: 4px;

            &.selected {
                background-color: rgb(from var(--accent-color) r g b / 0.5);
                color: var(--main-text-color);
            }

            &:hover:not(.selected) {
                background-color: var(--highlight-bg-color);
            }

            .typeahead-item-name {
                @include mixins.ellipsis();
                display: flex;
                gap: 8px;
                font-size: 11px;
                font-weight: 400;
                line-height: 14px;

                i {
                    display: inline-block;
                    position: relative;
                    top: 2px;
                }
            }

            .typeahead-current-checkbox {
                margin-left: auto;
            }
        }
    }
}
