@import './../util/utils.scss';

.app-profile-container {
    margin: $primary-toolbar-height 0vh 0vh 0vh;

    .app-profile-content {
        margin: 30px 30px 0vw 30px;

        section {
            margin: 0px 0px 50px 0px;

            color: color(primary-text);
            
            h1 {
                margin: 0px 0px 0px 0px;
                padding: 0;

                font-family: 'Rajdhani', sans-serif;
                font-size: 2rem;
                font-weight: normal;
            }

            hr {
                margin: 0px 0px 20px 0px;

                border-color: color(divider);
                border-width: 0.5px;
            }
            
            p {
                margin: 0px 0px 0px 0px;
                padding: 0;

                font-size: 1.2rem;
            }

            .app-profile-section-content {
                margin: 0px 0px 0px 20px;
            }

            .app-profile-password-form {
                @include apply-flexlayout(column, wrap, center, center);
            }

            button {
                background: color(accent);

                color: color(text-icons);
                font-family: 'Rajdhani', sans-serif;
                font-size: 1rem;
                font-weight: bold;
            }

            input {
                color: color(accent);
            }

            .app-profile-password-section {
                @include apply-flexlayout(row, wrap, center, center);
            }

            mat-card {
                @include apply-flexlayout(column, wrap, center, center);

                width: 300px;

                h1 {
                    margin: 0px 0px 15px 0px;
                }
                
            }
        }
    }

    mat-toolbar {
        height: $secondary-toolbar-height;

        background: color(secondary);

        h1 {
            margin: 0vw 0.5vw 0vw 0.5vw;

            color: color(text-icons);
            font-family: 'Roboto', sans-serif;
            font-size: 1.6rem;
            text-transform: uppercase;
        }
    }
}