/*
The name class names are obnoxious to prevent class 
collision between components

Technically we should be able to have these in
component specific style files, but I have
had mixed success on having these styles be
applied in a fashion that you would want. Specifically
the unique component id added to the styles, does
not always seem to select elements correctly
*/

.mud-stack-with-dropdown-and-buttons .mud-button {
    margin-top: 4px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.blend-calculator-menu > .mud-button {
    margin-top: 3px !important;
    padding: 7px !important;
}

/*
Use this class to get a select or other popover
to be as wide as select item content requires,
ignoring the width of the field. This mimics
similar behaviour from RelativeWidth in MudBlazor 8
*/
.mud-popover-ignore-activator-width {
    width: auto !important;
    max-width: initial !important;
}

/*
Use this to style a mud select item to be 
a group divider as scene in the VR Rx Data Table
*/
/*noinspection CssUnresolvedCustomProperty*/
.mud-select-group-divider {
    background-color: var(--mud-palette-secondary);
    padding: 8px;
    color: var(--mud-palette-secondary-text);
    font-weight: 400;
}

/*https://github.com/MudBlazor/MudBlazor/discussions/4786#discussioncomment-3025360*/
/*Hides the group options outside the dropdown*/
th .mud-select-group-divider {
    display:none;
}

/*
Styles for the RxOperationLayerForm component's product dropdown
*/
.product-dropdown-container .mud-tooltip-root {
    width: 100%;
    max-width: 100%;
}

/*
Styles for the RxOperationLayerForm component's product name field
*/
.product-name-container input {
    text-overflow: ellipsis !important;
}

/*
Styles for coloring outlined form fields based on state
*/
.swat-warning .mud-input-outlined {
    color: var(--mud-palette-warning) !important;

    fieldset {
        border-color: var(--mud-palette-warning) !important;
    }
}

.swat-warning .mud-input-label-outlined {
    color: var(--mud-palette-warning) !important;
}

/* Even smaller padding  */
.mud-table-even-denser {
    .mud-table-cell {
        padding: 0px 8px !important;
        height: 48px !important;
    }
}

/* Hides the select all option on a MudTable */
.mud-table-hide-select-all {
    th:first-of-type {
        .mud-table-cell-checkbox {
            display: none;
        }
    }
}

/*
Use to hide extra text with ...
 */
.with-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elide-chip-content {
    .mud-chip-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        align-content: center;
    }
}

/* 
Simple Tag Component styles so that each tag does 
not need to add them. Ensures good colors for light
and dark mode
*/
.simple-tag {
    border-color: var(--mud-palette-text-primary);

    .mud-chip-content {
        color: var(--mud-palette-text-primary);
    }
}


/*
Styles for coloring disabled outlined form fields based on state
*/
.disabled-success .mud-input-outlined.mud-disabled {
    color: var(--mud-palette-success) !important;

    fieldset {
        border-color: var(--mud-palette-success) !important;
    }
}

.disabled-success .mud-input-label-outlined.mud-disabled {
    color: var(--mud-palette-success) !important;
}

.disabled-warning .mud-input-outlined.mud-disabled {
    color: var(--mud-palette-warning) !important;

    fieldset {
        border-color: var(--mud-palette-warning) !important;
    }
}

.disabled-warning .mud-input-label-outlined.mud-disabled {
    color: var(--mud-palette-warning) !important;
}

.disabled-error .mud-input-outlined.mud-disabled {
    color: var(--mud-palette-error) !important;

    fieldset {
        border-color: var(--mud-palette-error) !important;
    }
}

.disabled-error .mud-input-label-outlined.mud-disabled {
    color: var(--mud-palette-error) !important;
}