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

.visualization-container {
    background: var(--g-color-base-background);
    height: 100%;

    &.blank {
        background: var(--g-color-sfx-veil);
    }

    .visualization-blank {
        padding: 20px;
        font-size: 15px;
        background: var(--g-color-sfx-veil);
    }

    .placeholders-wrapper {
        height: calc(100% - 47px);
        overflow-y: auto;
        background: var(--g-color-base-background);
    }

    .placeholders {
        background: var(--g-color-base-background);
    }

    .item-right-icon {
        justify-content: center;
        align-items: center;
    }

    .placeholders.disabled {
        .visualization-container__placeholder-actions {
            opacity: 0;
        }

        .item {
            padding: 6px 12px 4px;
            cursor: default;

            color: var(--g-color-text-secondary);
            background: var(--dl-color-contrast-4);

            &.local-item {
                border-left: 5px solid var(--w-local-item-border);
            }

            .item-title {
                .aggregation-title {
                    color: var(--g-color-text-secondary);
                }
            }

            .item-icon {
                color: var(--g-color-text-secondary);
            }

            .item-right-icon.cross-icon,
            .item-right-icon.more-icon {
                display: none;
            }

            &:hover {
                .item-right-icon.cross-icon,
                .item-right-icon.more-icon {
                    display: none;
                }

                background: var(--dl-color-contrast-4);
            }

            &.is-dragging,
            &:active,
            &:focus {
                padding: 6px 12px 4px;
                background: var(--dl-color-contrast-4);
                border: none;
            }
        }
    }

    .subcontainer {
        border-bottom: 1px solid var(--g-color-line-generic);

        .subheader {
            margin-bottom: var(--g-spacing-2);
            display: flex;
            align-items: center;
            color: var(--g-color-text-complementary);

            .placeholder-icon {
                margin-right: 8px;
                height: 24px;
                width: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .placeholder-tooltip-icon {
                order: 1;
                transform: scale(0.9);
                margin-left: 4px;
            }

            .visualization-container__placeholder-actions {
                opacity: 0;
            }

            .visualization-container__placeholder-actions {
                display: flex;
                margin-left: auto;
            }

            .placeholder-action-icon {
                order: 1;
            }
        }

        .subheader_with-tooltip {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .dnd-container {
            margin: 2px;
            border-radius: 4px;
            padding: var(--g-spacing-3) var(--g-spacing-3) var(--g-spacing-1);
            border: solid 1px transparent;

            .item-icon {
                display: inline-block;
                margin-right: 8px;
            }

            &__item:last-child {
                margin-bottom: var(--g-spacing-2);
            }

            &__item_short {
                align-items: center;
                display: flex;
                & > div:first-child {
                    width: 85%;
                }
            }

            &__filter-tooltip {
                margin-left: auto;
            }

            .drop-place {
                height: 2px;
                border-radius: 2px;
                background-color: var(--g-color-line-generic);
                position: relative;
                margin: 0 0 -2px;
                display: none;
            }

            &_cannot-drop {
                background: var(--g-color-base-danger-light);
                border: 1px dashed var(--g-color-line-danger);
                border-radius: 4px;
            }

            &_can-drop {
                background: var(--g-color-base-generic);
                border: 1px dashed var(--g-color-line-generic-active);
                border-radius: 4px;
            }
        }

        &:hover {
            .subheader {
                .visualization-container__placeholder-actions {
                    opacity: 1;
                }
            }
        }
    }

    &__geotype-select {
        position: relative;
        top: 1px;
        display: inline-block;
        width: 100%;
        max-width: calc(100% - 68px);
    }

    &_geotype-select-popup {
        @include dl-select-popup;
    }
}

.placeholder-icon-tooltip-content {
    padding: var(--g-spacing-4);
    width: 300px;
}
