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

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

    &.blank {
        background: none;
    }

    .dataset-wrapper {
        overflow-y: auto;
    }

    .dataset-blank {
        padding: 20px;
        font-size: 15px;
        color: var(--g-color-text-secondary);
    }

    .custom-text-input {
        width: calc(100% - 28px - 12px);
    }

    .datasets-actions-container {
        top: 0;
        position: sticky;
        max-height: 50%;
        overflow-y: auto;

        .dataset-icon {
            position: absolute;
            margin-left: 21px;
            margin-top: 10px;
        }
    }

    .datasets-actions-loader-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        height: 40px;
    }

    .dataset-veil {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--g-color-sfx-veil);
        z-index: 3;
    }

    .dataset-list-loader {
        position: absolute;
        top: 10px;
    }

    .dataset-fields-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .error {
        width: 256px;
        height: calc(100% - 47px);
        padding: 16px 20px;
        font-size: 13px;
        background-color: var(--g-color-base-background);

        div {
            margin-top: 12px;
        }

        button {
            margin-top: 12px;
        }

        .btn-retry {
            margin-right: 12px;
        }
    }

    .subcontainer {
        border-top: 1px solid var(--g-color-line-generic);
        background: var(--g-color-base-background);
        min-height: 115px;

        &.hierarchy-subcontainer {
            min-height: 88px;
        }

        .subheader {
            padding: 16px 12px 0;
            font-weight: bold;

            .icon {
                float: right;
                margin-left: 8px;
            }

            .add-param-btn-wrapper {
                float: right;
            }

            .add-param-btn {
                width: 28px;
            }
        }
    }

    .actions-subcontainer {
        position: sticky;
        top: 0;
        min-height: 45px;
        border-top: none;
        z-index: 3;

        .icon {
            cursor: pointer;

            &.plus-icon {
                position: relative;
                margin-left: -23px;
                z-index: 2;
            }
        }
    }

    .dimensions-subcontainer,
    .hierarchy-subcontainer {
        border-top: none;
    }
}
