/*
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%;
}

.product-dropdown-container .product-group-header {
    background: #f5f5f5;
}

.product-dropdown-container .product-group-header p {
    font-size: 0.875rem;
}

.product-dropdown-container input {
    text-overflow: ellipsis !important;
}

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

/*
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;
}