@use 'common-mixins';

.sub-header {
    display: flex;
    flex-direction: row;
    margin-bottom: 25px;

    .left {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: 32px;
        min-width: 376px;
        box-sizing: border-box;
        border-right: 1px solid var(--iqser-separator);

        .info {
            margin-bottom: 8px;

            > span {
                font-weight: 500;
            }
        }

        .large-label {
            font-weight: bold;
        }
    }

    .right > form {
        display: flex;
        align-items: flex-end;
        padding-left: 16px;

        .iqser-input-group {
            margin: 0 8px;
        }

        iqser-circle-button {
            margin-left: 8px;
        }
    }
}

.dialog-content {
    overflow: hidden;
    padding: 24px 0 0;
}

.csv-part {
    display: flex;
    flex: 1;
    overflow: hidden;

    .csv-part-header {
        min-height: 50px;
        box-sizing: border-box;
        background: var(--iqser-background);
        border-top: 1px solid var(--iqser-separator);
        border-bottom: 1px solid var(--iqser-separator);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;

        > div:first-child > *:not(:last-child)::after {
            content: '-';
            margin: 0 4px;
        }

        .actions {
            display: flex;
            align-items: center;

            .quick-activation {
                margin-left: 12px;

                > :not(:last-child) {
                    margin-right: 10px;
                }
            }
        }
    }

    .search-input-container {
        background-color: var(--iqser-background);
        border-bottom: 1px solid var(--iqser-separator);
        padding: 8px 16px;
    }

    .csv-part-content {
        overflow: auto;
        @include common-mixins.no-scroll-bar;
        font-size: 12px;
        flex: 1;

        .no-column-data {
            height: 100%;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--iqser-btn-bg);
            line-height: 15px;
            font-weight: 500;
        }

        > *:not(.no-column-data) {
            border-bottom: 1px solid var(--iqser-separator);
            display: flex;
            padding: 7px 16px;
            align-items: center;
        }
    }

    > .left {
        width: 375px;
        min-width: 375px;
        background: var(--iqser-alt-background);
        display: flex;
        flex-direction: column;

        .csv-header-pill-content {
            overflow: auto;
            padding: 7px 0;
            background: var(--iqser-alt-background);
            @include common-mixins.no-scroll-bar;

            .csv-header-pill-wrapper {
                padding: 3px 10px;

                .csv-header-pill {
                    min-height: 32px;
                    border-radius: 8px;
                    padding: 10px;
                    background: var(--iqser-background);
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;

                    .secondary {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 2px;

                        .entry-count {
                            white-space: nowrap;
                            margin-right: 10px;
                        }

                        .sample {
                            @include common-mixins.line-clamp(1);
                        }
                    }

                    &.selected {
                        background-color: var(--iqser-primary);
                        color: var(--iqser-white);
                    }
                }
            }
        }

        border-right: 1px solid var(--iqser-separator);
    }

    > .center {
        width: 150px;
        min-width: 150px;
        display: flex;
        flex-direction: column;
        background: var(--iqser-alt-background);
        border-right: 1px solid var(--iqser-separator);

        &:not(.collapsed) iqser-circle-button {
            margin-right: -8px;
        }

        &.collapsed {
            width: 50px;
            min-width: 50px;

            > .csv-part-header {
                height: 100%;
                border-bottom: none;
                align-items: center;
                flex-direction: column-reverse;
                justify-content: flex-end;
                padding-top: 8px;

                > .all-caps-label {
                    transform: rotate(90deg) translateX(50%);
                    white-space: nowrap;
                    margin-top: 10px;
                }
            }
        }
    }
}
