:root {
    /* Element heights */
    --vortex-input-field-height: 4rem;
    --vortex-text-field-height: 1.68rem;
    --vortex-autocomplete-height: 3.6rem;
    /* Colors */
    --vortex-page-background-color: var(--mud-palette-background);
    --vortex-primary-color: var(--mud-palette-primary);
    --vortex-dark-color: var(--mud-palette-dark);
    --vortex-text-primary-color: var(--mud-palette-text-primary);
    --vortex-component-background-color: var(--mud-palette-surface);
    --vortex-icon-color: var(--mud-palette-primary-lighten);
    /* Borders */
    --vortex-border-radius: 15px;
    --vortex-border-width: 4px;
    --vortex-border-color: var(--mud-palette-tertiary);
    --vortex-border-color-disabled: var(--mud-palette-gray-light);
    /* Borders - Hover */
    --vortex-input-border-hover-color: var(--mud-palette-primary-lighten);
}

/* -- Typography -- */

/* Override for input component text from secondary to primary */
.mud-input-label-inputcontrol { color: var(--vortex-text-primary-color) !important; }

/* Override for input helper text from secondary to primary */
.mud-input-helper-text { color: var(--vortex-text-primary-color) !important; }

/* Stop the forced uppercase for buttons */
.mud-typography-button,
.mud-button { text-transform: none !important; }


/* -- Colors and borders -- */

/* Borders for input fields */
.mud-input-control .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--vortex-border-color);
    border-radius: var(--vortex-border-radius);
    border-width: var(--vortex-border-width);
}

/* Exaggerating the Select disabled state colors  */
.mud-input-control .mud-input-outlined.mud-disabled {
    border-color: var(--vortex-border-color-disabled);
}

/* Select input fields background  */
.mud-input-control .mud-input-control-input-container {
    background-color: var(--vortex-component-background-color);
    border-radius: var(--vortex-border-radius);
}

/* Select input fields border - hover */
.mud-select, .mud-input-control, .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--vortex-input-border-hover-color) !important;
}

/* Icons in Select input fields */
.mud-input-control, .mud-button-root, .mud-icon-default, .mud-icon-button-label .mud-icon-root {
    color: var(--vortex-icon-color);
}

/* Checkboxes */
.mud-checkbox .mud-button-root.mud-icon-button {
    color: var(--vortex-border-color)
}

/* The lists displayed on popovers like Select and Autocomplete  */
.mud-popover .mud-list {
    border-color: var(--vortex-border-color);
    border-width: var(--vortex-border-width);
    border-radius: var(--vortex-border-radius);
}

/* Popover list background */
.mud-popover.mud-paper {
    background-color: var(--vortex-component-background-color);
    border-radius: var(--vortex-border-radius) ;
}

/* Button borders */
.mud-button-outlined {
    background-color: var(--vortex-component-background-color);
    border-color: var(--vortex-border-color);
    border-radius: var(--vortex-border-radius);
    border-width: var(--vortex-border-width);
}

/* Buttons - hover */
.mud-button-outlined:hover {
    border-color: var(--vortex-input-border-hover-color);
    background-color: var(--vortex-component-background-color);
}

.vortex-input {
    color: var(--vortex-text-primary-color);
}

button.vortex-input,
.mud-select.vortex-input {
    color: var(--vortex-text-primary-color) !important;
}

/* -- Heights -- */

/* Popover list height */
.mud-popover .mud-list .mud-list-item {
    height: var(--vortex-autocomplete-height);
}

/* Standard height for .vortex-input */
.vortex-input.mud-select,
.vortex-input.mud-autocomplete,
.vortex-input .mud-select-input,
button.vortex-input {
    height: var(--vortex-input-field-height); 
}

/* For MudTextField. TODO find a way to use input-field-height. */
.vortex-input .mud-input-slot.mud-input-root.mud-input-root-outlined {
    height: var(--vortex-text-field-height);
}

.vortex-flex-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    width: 100%;
}