/*-----------------------------------------------*/
/* --- Override MudBlazor with css variables --- */
/*-----------------------------------------------*/



/* NUMBER - input-control  */
.mud-input-control.mud-input-input-control.mud-input-number-control {
    max-width: var(--t-input-number-max-width);
}

/* DATE - picker  */
.mud-picker.mud-picker-inline.mud-picker-input-button {
    max-width: var(--t-input-number-max-width);
}

.mud-picker-inline-paper .mud-picker-view{
    margin-top: 4px; /* Top margin of date mud picker */
}


/* ALL input  */
.mud-input-control .mud-input {
    font-size: var(--t-input-font-size);
    font-weight: var(--t-input-font-weight);
}

/* TEXT - input  */
.mud-input-control .mud-input.mud-input-text {
    width: var(--t-input-width);
}

/* TEXT - input  */
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: var(--t-input-margin-top);
    margin-bottom: var(--t-input-margin-bottom);
    max-width: var(--t-input-text-max-width);
}

/* TEXT Dense - input  */
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-filled {
    max-width: var(--t-input-text-max-width);
}

/* ALL  input-root  */
.t-form-input .mud-input-control .mud-input .mud-input-slot.mud-input-root {
    padding: var(--t-input-padding);
    background: var(--t-input-background); /*For testing */
    text-align: var(--t-input-text-align);
    line-height: 1.2176em; /* Fix for bottom of letters getting cut off in mud inputs */
    letter-spacing: normal;
}

.t-form-input .mud-select .mud-input-control .mud-input .mud-input-slot.mud-input-root {
    line-height: 1.1176em; /* Fix mudselect forminput bases */
}

.mud-input-control > .mud-input-control-input-container {
    max-width: var(--t-input-text-max-width);
}

/* ALL Text, Number (not select input-root  */
.t-form-input .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    height: 1.125em; /* Forsøk på å fikse bug i Mud hvor zoom fører til feilplassering relatert til mud-input { line-height: 1.1876em; */
}

.mud-select .mud-select-input .mud-input-slot {
    height: 1.1876em; 
}


/* ALL - input-root - placeholder  */
.mud-input-control .mud-input-root::placeholder {
    font-weight: var(--t-input-font-weight-placeholder);
}

/* DENSE - input-root */
form .mud-input-control .mud-input.mud-input-margin-dense .mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding: var(--t-dense-padding);
    background: var(--t-input-background); /*For testing*/
}

/* TextArea - input-root */
.mud-input > textarea.mud-input-root.mud-input-root-filled {
    margin: 12px 12px 10px !important;
}


/*.mud-icon-button {
    padding: var(--t-icon-button-padding);
}*/

/*.mud-input-control {
    margin-top: var(--t-input-margin-top);
}*/

/*.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text*/



/*-----------------------------------------*/
/* --- Override MudBlazor when classes --- */
/*-----------------------------------------*/


/* FormInput - input-control  */
.t-form-input .mud-input-control {
    margin-top: 0px !important; /* t-form-input should control margin */
    max-width: var(--t-input-text-max-width);
}

/* FormInput Link - input  */
.t-form-input .t-link .mud-input {
    color: var(--mud-palette-tertiary-text);
}

/* FormInput Link - input-root  */
.t-form-input .t-link .mud-input-root:hover {
    color: #B4D6FA;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--mud-palette-tertiary-text);
}

/* DATE - picker  */
.t-form-input .mud-picker .mud-icon-button-edge-end {
    margin-inline-end: -36px;
    padding: 0px;
}
.t-form-input .mud-picker .mud-svg-icon {
    height: 22px;
    width: 22px;
}

/* CHECKBOX  */
.t-form-input .mud-checkbox .mud-icon-button {
    padding: 2px;
}