@import './variables.less';

mat-form-field.material-mofication-normal {
    &.stretch {
        display: flex;
        flex: auto;
    }
    &.black {
        & div.mat-mdc-text-field-wrapper {
            background: var(--scheme-color-5);
        }
    }
    &.row {
        margin-right: 12px;
        &:last-child {
            margin-right: 0;
        }
    }
    &.stretch {
        width: 100%;
    }
    & div.mat-mdc-form-field-focus-overlay {
        display: none;
    }
    &.textarea {
        & div.mat-mdc-form-field-infix {
            padding-top: 16px!important;
            padding-bottom: 0px!important;
            & label {
                font-size: 14px;
                font-weight: 400;
                top: 24px!important;
                color: var(--scheme-color-2)!important;
            }
        }    
    }
    &:not(.textarea) {
        & div.mat-mdc-form-field-infix {
            height: 42px;
            min-height: 42px;
            padding-top: 16px!important;
            padding-bottom: 0px!important;
            & label {
                font-size: 14px;
                font-weight: 400;
                top: 24px!important;
                color: var(--scheme-color-2)!important;
            }
        }
    }
    & div.mat-mdc-text-field-wrapper {
        border-radius: 0;
    }
    & mat-select {
        font-size: 14px;
    }
    & .mdc-text-field--invalid:not(.mdc-text-field--disabled) {
        & .mdc-line-ripple::before,
        & .mdc-line-ripple::after {
            border-color: var(--scheme-color-warning)!important;
        }
    }
}

button[mat-stroked-button][disabled] {
    background: var(--scheme-color-3-15);
    border-color: var(--scheme-color-3-15);
    cursor: default;
    & * {
        color: var(--scheme-color-3);
    }
    & .mat-mdc-button-persistent-ripple,
    & .mat-mdc-focus-indicator,
    & .mat-mdc-button-touch-target,
    & .mat-mdc-button-ripple {
        display: none;
    }
    &:hover {
        background: var(--scheme-color-3-15);
        border-color: var(--scheme-color-3-15);
        & * {
            color: var(--scheme-color-3);
        }
    }
}
button[mat-stroked-button] {
    & .mdc-button__label {
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        & mat-spinner {
            margin-right: 16px;
        }
    }
}

& mat-error {
    color: var(--scheme-color-warning)!important;
    line-height: 12px;
    & * {
        color: var(--scheme-color-warning)!important;
        font-weight: 400;
    }
}

div.mat-mdc-select-panel[role="listbox"] {
    & mat-option {
        font-size: 13px;
        min-height: 32px;
        & span[class^="mdc-list-item"] {
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

mat-form-field.mat-mdc-form-field-type-mat-input.material-mofication-outline {
    display: flex;
    flex: auto;
    height: 24px;
    & div.mat-mdc-text-field-wrapper {
        height: 24px;
        & div.mat-mdc-form-field-flex {
            height: 24px;
            & div.mdc-notched-outline {
                & * {
                    border: thin solid var(--scheme-color-3);
                    border-radius: 0;
                }
                & div.mdc-notched-outline__leading {
                    border-right: none;
                }
                & div.mdc-notched-outline__trailing {
                    border-left: none;
                }
            }
        }
        & div.mat-mdc-form-field-infix {
            padding: 0;
            font-size: 13px;
            display: flex;
            height: 24px;
            min-height: 24px;
            align-items: center;
        }
        &:hover {
            & div.mat-mdc-form-field-flex {
                & div.mdc-notched-outline {
                    & * {
                        border-color: var(--scheme-color-active)!important;
                    }
                }    
            }
        }
    }
    &.mat-focused {
        & div.mat-mdc-text-field-wrapper {
            & div.mat-mdc-form-field-flex {
                & div.mdc-notched-outline {
                    & * {
                        border-color: var(--scheme-color-accent)!important;
                    }
                }    
            }
        }
    }
    &[error="true"] {
        & div.mat-mdc-text-field-wrapper {
            & div.mat-mdc-form-field-flex {
                & div.mdc-notched-outline {
                    & * {
                        border-color: var(--scheme-color-warning)!important;
                    }
                }    
            }
        }
    }
    &[passiveborder="true"] {
        & div.mat-mdc-text-field-wrapper {
            & div.mat-mdc-form-field-flex {
                & div.mat-mdc-form-field-infix {
                    & *:first-child {
                        transition: margin 150ms;
                        margin-left: -16px;
                    }
                }
                & div.mdc-notched-outline {
                    & * {
                        border-color: var(--scheme-color-5-00);
                    }
                }
            }
            &:hover {
                & div.mat-mdc-form-field-flex {
                    & div.mdc-notched-outline {
                        & * {
                            border-color: var(--scheme-color-5-00)!important;
                        }
                    }    
                }
            }
        }
        &.mat-focused {
            & div.mat-mdc-text-field-wrapper {
                & div.mat-mdc-form-field-flex {
                    & div.mat-mdc-form-field-infix {
                        & *:first-child {
                            margin-left: 0;
                        }
                    }
                    & div.mdc-notched-outline {
                        & * {
                            border-color: var(--scheme-color-accent)!important;
                        }
                    }    
                }
            }
            &:hover {
                & div.mat-mdc-form-field-flex {
                    & div.mdc-notched-outline {
                        & * {
                            border-color: var(--scheme-color-accent)!important;
                        }
                    }    
                }
            }
        }
    }
}

*.input-outside-border {
    & mat-form-field.mat-mdc-form-field-type-mat-input.material-mofication-outline {
        & div.mat-mdc-text-field-wrapper {
            & div.mat-mdc-form-field-flex {
                & div.mdc-notched-outline {
                    & * {
                        border: none!important;
                    }  
                }
            }

            &:hover {
                & div.mat-mdc-form-field-flex {
                    & div.mdc-notched-outline {
                        & * {
                            border: none!important;
                        }
                    }    
                }
            }
        }
        &.mat-focused {
            & div.mat-mdc-text-field-wrapper {
                & div.mat-mdc-form-field-flex {
                    & div.mdc-notched-outline {
                        & * {
                            border: none!important;
                        }
                    }    
                }
            }
        }
    }
}

*.input-outside-border:has(mat-form-field) {
    border: thin solid var(--scheme-color-3);
    transition: border-color 50ms;
    &:hover {
        border-color: var(--scheme-color-active);
    }
}

*.input-outside-border:has(.mat-focused) {
    border-color: var(--scheme-color-accent);
    &:hover {
        border-color: var(--scheme-color-accent);
    }
}

& div.mat-mdc-autocomplete-panel {
    & mat-option {
        height: 24px;
        min-height: 24px;
        & span[class^="mdc-list-item"] {
            font-size: 14px;
            width: 100%;
            & span {
                color: var(--scheme-color-2);
                white-space: nowrap;
                & span {
                    font-weight: 700;
                    color: var(--scheme-color-0);
                }
            }
        }
        & div.option-wrapper{
            display: flex;
            flex: auto;
            flex-direction: row;
            align-items: center;
            & span.caption {
                flex: auto;
                font-size: 14px;
                color: var(--scheme-color-2);
                white-space: nowrap;
                & span {
                    font-weight: 700;
                    color: var(--scheme-color-0);
                }
            }
            & mat-icon {
                font-size: 16px;
                height: 16px;
                width: 16px;
                margin: 0;
                color: var(--scheme-color-2);
                &:hover {
                    color: var(--scheme-color-0);
                }
            }
        }
    }
}

& mat-checkbox.material-mofication-mini {
    padding: 0;
    margin: 0;
    height: 24px;
    width: 24px;
    min-width: 24px;
    top: 0;
    left: 0;
    overflow: hidden;
    & div.mdc-form-field {
        padding: 0;
        margin: 0;
        height: 24px;
        width: 24px;
        & div.mdc-checkbox {
            padding: 0;
            margin: 0;
            height: 24px;
            width: 24px;
            top: 0;
            left: 0;
            & div.mdc-checkbox__background {
                left: 4px;
                top: 4px;
                height: 16px;
                width: 16px;
            }
            & div.mdc-checkbox__ripple {
                display: none;
            }
        }
    }
}
& mat-checkbox.material-mofication-outline {
    & div.mdc-form-field {
        & div.mdc-checkbox {
            padding-right: 4px;
            margin-right: 0;
            & div.mdc-checkbox__background {
                background: none!important;
                width: 16px;
                height: 16px;
            }
            & div.mdc-checkbox__ripple {
                display: none;
            }
        }
    }
}
mat-card {
    margin: 6px;
    & mat-card-title {
        padding: 8px 16px;
        color: var(--scheme-color-1);
        font-size: 15px!important;
        letter-spacing: normal!important;
    }
    &.small-title {
        & mat-card-title {
            padding: 4px 9px;
            font-size: 13px!important;
        }    
    }
    & mat-card-subtitle {
        padding: 0 16px 8px 16px;
        color: var(--scheme-color-3);
        font-size: 13px!important;
        letter-spacing: normal!important;
    }
    & mat-card-content {
        padding: 0 16px;
        & * {
            color: var(--scheme-color-1);
        }
    }
    &.no-left-margin {
        margin-left: 6px;
    }
    &.controlls {
        & mat-card-content {
            text-align: right;
            & div.controlls {
                text-align: right;
            }
        }
    }
    &.sticky {
        padding-top: 0;
    }
    &.fill {
        overflow: auto;
        height: 100%;
    }
}
.mat-mdc-menu-content {
    & .mat-icon {
        height: 24px;
        width: 24px;
        font-size: 18px;
        line-height: 24px;
        overflow: hidden;
    }
    
}
button.small {
    padding: 0;
    font-size: 12px;
    height: 24px!important;
    color: var(--scheme-color-1)!important;
    display: inline-block;
    margin: 0px 6px;
}
button[mat-menu-item] {
    min-height: 32px;
    *[class^="mdc-list-item"] {
        width: 100%;
        font-size: 14px!important;
    }
}
button[mat-icon-button].material-mofication-mini {
    width: 24px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    & mat-icon {
        height: 18px;
        width: 18px;
        font-size: 18px;
        overflow: hidden;
    }
}
table[mat-table] {
    & .mat-mdc-row {
        height: 24px;
    }
}
p.material-menu-label {
    font-size: 13px;
    padding: 0 16px;
    color: var(--scheme-color-3);
}

mat-snack-bar-container {
    & .mdc-snackbar__surface {
        background-color: var(--scheme-color-4)!important;
    }
    & * {
        color: var(--scheme-color-1);
    }
}

* {
    letter-spacing: normal;
}
