/*****************************************************
 * CSS Overrides
 * Overrides for third-party component styles that
 * cannot be modified at the source level.
 *****************************************************/

/*****************************************************
 * MudBlazor / MudBlazorExtensions
 *****************************************************/
.mud-select.timespan-operator {
    min-width: 150px;
}

.mud-select-has-incidents {
    max-width: 160px;
    justify-content: end;
}

.mud-popover.mud-popover-open {
    min-width: 150px;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-left: var(--spacing-2-5);
    padding-right: var(--spacing-2-5);
}

.pa-flex-cell div.mud-tooltip-root.mud-tooltip-inline {
    width: 100% !important;
}

.mud-popover.mud-tooltip.pa-tooltip-popup {
    display: block !important;
    width: min(fit-content, var(--container-md), calc(100vw - var(--spacing-8))) !important;
    max-width: min(var(--container-md), calc(100vw - var(--spacing-8))) !important;
    min-width: 0 !important;
    box-sizing: border-box;
    text-align: start;
}

.mud-popover.mud-tooltip.pa-tooltip-popup .pa-tooltip-popup-content {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Prevent linear progress in table header from adjusting 
    content position when loading indicator is shown */
th div.mud-progress-linear {
    margin-top: -4px;
}

div.mud-chip-container .mud-chip.mud-chip-size-small {
    height: 16px;
    margin: 0 var(--spacing-2) 0 0;
    gap: var(--spacing-4);
    padding: 9px 6px;
}

div.mud-chip-container .mud-chip.mud-chip-size-small svg.mud-svg-icon {
    font-size: var(--text-sm);
}

div.mud-tab {
    white-space: pre;
}

.pa-toolbar .mud-button-group,
.pa-toolbar .mud-button,
.pa-toolbar .mud-menu {
    height: 40px;
}

.pa-toolbar .mud-button-label {
    line-height: 18px;
}

.pa-toolbar-btn-sm {
    min-width: 120px;
}

.pa-toolbar-btn-md {
    min-width: 160px;
}

.pa-toolbar-btn-lg {
    min-width: 200px;
}

/*****************************************************
 * Radzen Splitter
 *****************************************************/
.rz-splitter > .rz-splitter-bar-resizable:active {
    background-color: var(--mud-palette-primary);
}

/*****************************************************
 * Elsa Studio Expression Editor
 *****************************************************/
.studio-expression-input-menu-item .mud-list-item-icon {
    min-width: 33px;
}

.studio-expression-input-monaco-editor {
    height: 120px;
}

.studio-monaco-editor-large {
    height: 320px;
}

/* Align the expression type button (e.g. "Variable") with the input field */
.d-flex.flex-grow-1.gap-4.align-content-start > .flex-none.pt-1 {
    padding-top: var(--spacing-2) !important;
}

/*****************************************************
 * Monaco Editor
 *****************************************************/
.monaco-editor {
    border-radius: var(--spacing-1);
}

.monaco-editor .overflow-guard {
    border-radius: var(--spacing-1);
}

.monaco-editor .suggest-widget div.tree {
    white-space: unset;
    padding-bottom: 0;
}

/*****************************************************
 * Badge Overlap for Small Icons
 *****************************************************/
.elsa-toolbar-icon .mud-badge.mud-badge-bottom.right.mud-badge-overlap
{
    inset: calc(100% - 20px) auto auto calc(100% - 20px)
}