@import "~@capillarytech/cap-ui-library/styles/_variables";

$count-secondary-color: #8c8c8c;
$count-primary-color: #262626;

.group-list-page {
    .hidden-filter-column {
        display: none;
    }
    .audience-list-table {
        .name-header {
            width: 20%;

            .audience-name {
                font-size: 1rem;
                width: unset;
            }

            .name-header-group-icon {
                color: $CAP_G06;
                margin-right: $CAP_SPACE_16;
            }
        }

        .cap-error {
            position:static;
        }

        .name-header.embedded {
            padding-left: 0;
        }

        td.ant-table-column-sort {
            background: transparent;
        }

        .ant-table-selection-column .ant-table-header-column .ant-table-column-title::before {
            content: '\00a0';
            width: 16px;
            height: 16px;
        }
        .ant-table-selection-column .ant-checkbox-input {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 100%;
        }

        .ant-table .ant-table-tbody > tr > td,
        .ant-table .ant-table-tbody > tr > .ant-table-cell {
            vertical-align: middle;
        }
        .ant-table-thead .ant-table-filter-column {
            justify-content: flex-start;
            gap: 0.286rem;
        }
        .ant-table-column-title {
            flex: none;
        }
        .ant-table-column-sorters {
            justify-content: flex-start;
        }
        .ant-table-thead th.ant-table-column-sort {
            background: var(--ant-table-header-bg);
        }
        .ant-table-thead .ant-table-filter-trigger {
            margin: 0;
            padding: 0 0.286rem;
        }

        .size-cell-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 100%;

            .count-label-secondary {
                color: $count-secondary-color;
            }

            .count-label-primary {
                color: $count-primary-color;
            }
        }
    }
    .create-audience-group {
        padding: 10px 12px 10px 10px;
        gap: 4px;
    }
}

.info-message {
    margin: 0.3rem 0 0 0.3rem;
}

.org-timezone-tooltip {
    margin-left: $CAP_SPACE_08;
}

.org-timezone-tooltip-content {
    text-align: left;

    .org-timezone-tooltip__title,
    .org-timezone-tooltip__detail {
        color: $CAP_WHITE;
    }
}

.create-audience-button-column {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.segment-limit-alert {
    margin-bottom: 1rem;
    width: fit-content;
}

.realtime-filter-select-column.ant-col,
.created-by-filter-select-column.ant-col {
    width: fit-content;
    flex: 0 0 auto;
    max-width: none;
    margin-left: 1rem;

    .cap-unified-select-container {
        width: fit-content;
        height: 2.286rem;
        border-radius: 1.142rem;

        .ant-select-placeholder {
            color: #091e42;
            font-size: 0.857rem;
        }

        .ant-select-selection-item {
            font-size: 0.857rem;
            min-width: max-content;
        }
        .ant-select-prefix {
            font-size: 0.857rem;
            max-width: 100%;
        }
    }

    .cap-multi-select-v2-left-content {
        max-width: none;
        flex: 1;
        min-width: 0;
    }
}

.audience-controls-row {
    flex-wrap: nowrap;
    margin-bottom: 1.142rem;

    [id^="demo-video-"],
    [id^="support-link-"],
    i:has(+ [id^="demo-video-"]),
    i:has(+ [id^="support-link-"]) {
        display: none;
    }
}

.count-breakdown-row {
    display: flex;
    gap: 0.857rem;
    margin-top: 0.143rem;
}

.created-by-label {
    margin-top: 0.357rem;
}

.more-icon {
    font-size: 1.143rem;
}

.hierarchy-icon {
    color: $CAP_G01;
    margin-left: $CAP_SPACE_08;
}