@import '../../styles/variables';
@import '../../styles/inputs';

// Flyout is a tethered component and as such will be rendered outside the scope
// of the parent container and may not get all box styles.
.metadata-instance-editor-template-dropdown-flyout {
    @include box-sizing;

    &::before {
        border: none;
    }

    div.overlay {
        width: 288px;
        padding: 0;
        overflow: hidden;
        border: 1px solid $bdl-gray-30;
        border-radius: 4px;
    }

    ul.overlay {
        border: none;
    }

    .metadata-instance-editor-template-dropdown-menu {
        z-index: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: $white;

        .overlay-wrapper {
            overflow: hidden;
            border-top: none;
            border-radius: 0 0 4px 4px;

            // NOTE (cwei): targets ie11
            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                max-height: 300px;
            }

            // TemplateDropdown component is wrapped under two layers of Overlay components.
            // Removing the extra transform and animation properties so it doesn't mess up safari's scroll bar.
            ul.overlay {
                transform: none;
                animation: none;
            }
        }

        .overlay {
            position: static;
            padding: 0;
            border-radius: 0%;

            .datalist-item {
                padding: 0;
            }
        }

        .scroll-container {
            max-height: 300px;
        }

        .scroll-wrap-container {
            flex-grow: 1;
            overflow-x: hidden;

            // NOTE: targets ie11
            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                // Note (lbarrick) Avoids cutting off the last item in the list.
                height: 300px;
            }

            &::before {
                width: 110%;
                margin: 0 -5%;
                border-radius: inherit;
                box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, .25);
            }

            &::after {
                width: 110%;
                border-radius: inherit;
                box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, .15);
            }
        }

        // input re-styling due to tethering
        .search-input-container {
            margin: 0;
            padding: 10px 12px 12px;
            border-bottom: 1px solid $bdl-gray-30;
            border-radius: 4px 4px 0 0;

            input[type='text'] {
                @include box-inputs;

                width: 100%;
            }

            input[type='text']:focus {
                @include box-inputs-focus;
            }

            input[type='text']:hover {
                @include box-inputs-hover;
            }
        }

        .search-button {
            pointer-events: none;
        }
    }

    .btn-plain.metadata-template-dropdown-select-template {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 5px 35px 5px 15px;
        overflow: hidden;
        color: inherit;
        font-size: 13px;
        line-height: 20px;
        white-space: nowrap;
        text-align: inherit;
        text-overflow: ellipsis;

        &.metadata-template-dropdown-is-selected {
            color: $bdl-box-blue;
        }

        .template-display-name {
            flex: 10;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .metadata-instance-editor-template-message {
        position: absolute;
        right: 0;
        width: 288px;
        padding: 16px 15px;
        color: $bdl-gray-50;
        background-color: $white;
        border: 1px solid $bdl-gray-30;
        border-top-color: transparent;
        border-radius: 0 0 4px 4px;

        &.template-dropdown-loading-indicator {
            display: flex;
            justify-content: center;
        }
    }
}