/*Inputs. Really nasty css to try and keep using mudblazor inputs With proper label setup and such */
/*
    Move labels up and left, no animation
*/
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(-5px,-30px);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-5px,-30px);
}
/*
    Change label coloring when focused, remove white background on label
*/
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-primary);
}

.mud-input-label-outlined {
    background-color: transparent;
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--navy-800);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--navy-800);
}

.mud-input {
    color: var(--navy-800);
    font-style: var(--aftra-font-style-normal);
    font-family: var(--aftra-font-family-lato);
    font-weight: var(--aftra-font-weight-normal);
    font-size: var(--aftra-font-size-16);
    line-height: var(--aftra-line-spacing-19);
}
/*
    Add margin on top to account for moved label
    Bottom to account for error text
*/
.mud-input-control {
    margin-top: 5px !important;
    margin-bottom: 18px;
}

.mud-picker.no-label > .mud-input-control.mud-input-input-control {
    margin-top: 0 !important;
}
/*
    Swap these two so we always have the little padding we need, prevents shifting
*/
.mud-input-control-helper-container {
    margin-top: 0;
}

.mud-input-control-input-container {
    margin-bottom: 3px;
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 10.5px 14px;
}

.mud-input > textarea.mud-input-root-outlined {
    margin: 15px 16px;
}
/* More color changes */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--gray-800);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error {
    color: var(--navy-800) !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled {
    color: var(--navy-800);
}

.mud-select .mud-icon-root.mud-svg-icon {
    fill: var(--navy-800);
}
/* No margin for search, we shouldn't have a label */
.mud-input-control.mud-input-input-control.search-bar {
    margin-top: 0;
}
/* Border change when focused*/
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--gray-800);
    border-width: 1px;
    outline: var(--ice-500) solid 4px;
}

/*
    Make error text absolute so we dont shift when it appears
*/
.mud-input-helper-text.mud-input-error {
    font-weight: var(--aftra-font-weight-600);
    position: absolute;
}

.mud-input-error .mud-input-outlined-border {
    border-width: 2px !important;
}

/* Select dropdown */
.aftra-dropdown-popover {
    margin-top: 4px;
    box-shadow: 0px 2px 4px #00000029;
    border-radius: 8px;
}
/* Input disabled */
.mud-input.mud-disabled {
    color: var(--gray-800);
    background: var(--gray-500);
}

.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--gray-800);
}

/* Error text padding removal */
.mud-input-control-helper-container.px-2 {
    padding-left: 0 !important;
}