@use 'variables';

.header-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;

    .heading-xl {
        max-width: 88%;
    }

    iqser-circle-button {
        position: absolute;
        top: -8px;
        left: 290px;
    }
}

.legend {
    display: flex;
    flex-direction: column;
    margin-left: -8px;

    > div:not(.help-mode-on-mouse-over) {
        display: flex;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        padding: 3px 8px;

        &:hover {
            background-color: var(--iqser-tab-hover);
        }

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

        &:not(:last-of-type) {
            margin-bottom: 4px;
        }
    }
}

iqser-progress-bar:not(:last-child) {
    margin-bottom: 10px;
}
