@use 'variables';

:host {
    height: fit-content;
}

.container {
    position: relative;
    display: flex;
    align-items: center;

    &:not(.column) {
        > *:not(:last-child) {
            margin-right: 16px;
        }
    }

    &.column {
        flex-direction: column;
        padding: 0 20px;

        > *:not(:last-child) {
            margin-bottom: 20px;
        }
    }
}

.donut-chart {
    flex-shrink: 0;
}

.text-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    > div {
        text-align: center;
    }
}

.breakdown-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: -8px;

    > div {
        border-radius: 4px;
        padding: 3px 8px;
        width: 100%;

        &:not(:last-child) {
            margin-bottom: 8px;
        }

        &:not(.filter-disabled) {
            cursor: pointer;
        }

        &:hover:not(.active):not(.filter-disabled) {
            background-color: var(--iqser-btn-bg);
        }

        &.active {
            background-color: rgba(variables.$primary, 0.1);
        }
    }
}

mat-select {
    width: unset;
}
