/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;

html {
    @include mat.theme((density: -5));
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

:root {

    /*form field*/
    @include mat.form-field-overrides((container-text-size: 0.875rem,
            container-text-line-height:1.7, // line height should be atleast 1.5 times text size
            outlined-label-text-size:0.875rem));

    /* list */
    @include mat.list-overrides((list-item-label-text-size:0.875rem,
            list-item-label-text-line-height:1.7, // line height should be atleast 1.5 times text size
        ));

    /*select*/
    @include mat.select-overrides((trigger-text-size:0.875rem,
            trigger-text-line-height:1.7, // line height should be atleast 1.5 times text size
        ));

    /*select options*/
    --mat-option-label-text-size: 0.875rem;

    /* stepper */
    @include mat.stepper-overrides((header-height:50px,
            header-hover-state-layer-color:var(--mat-sys-primary),
            header-focus-state-layer-color:var(--mat-sys-primary),
        ));

    .mat-step-header:hover:not([aria-disabled]),
    .mat-step-header:hover[aria-disabled=false] {

        .mat-step-icon {
            color: var(--mat-sys-on-primary-container);
            background-color: var(--mat-sys-primary-container);
        }

        .mat-step-label {
            color: var(--mat-sys-on-primary);
        }
    }

    .mat-step-header:focus:not([aria-disabled]),
    .mat-step-header:focus[aria-disabled=false] {

        .mat-step-icon {
            color: var(--mat-sys-on-primary-container);
            background-color: var(--mat-sys-primary-container);
        }

        .mat-step-label {
            color: var(--mat-sys-on-primary);
        }
    }

    /* expansion panel */
    @include mat.expansion-overrides((header-hover-state-layer-color:var(--mat-sys-primary),
            header-focus-state-layer-color:var(--mat-sys-primary),
        ));

    .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
        .mat-expansion-panel-header-title {
            color: var(--mat-sys-on-primary);
        }

        .mat-expansion-indicator svg {
            fill: var(--mat-sys-on-primary);
        }
    }

    /* button */
    @include mat.button-overrides((protected-container-color: var(--custom-button-background-color),
            protected-container-elevation-shadow:var(--custom-button-hover-color),
            protected-label-text-color:var(--custom-button-color)));

    /* Nav bar */
    .navbar-menu {
        .mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
            opacity: 0;
        }
    }

    .profile-container {
        .profile-button:hover>.mat-mdc-button-persistent-ripple::before {
            opacity: 0;
        }
    }

    /* Table */
    @include mat.table-overrides((header-headline-color:var(--mat-sys-on-primary),
        ));

    .mat-mdc-table .mat-mdc-header-cell {
        background: var(--mat-sys-primary);
    }

    /* Sort */
    @include mat.sort-overrides((arrow-color: var(--mat-sys-on-primary),
        ));
}