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

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

    .app-evaluations-buttonbar {
        @include apply-flexlayout(column, wrap, flex-start, flex-start);
        position: fixed;
        bottom: 7px;
        right: 7px;

        button {
            background: color(accent);
            margin: 5px 0px 5px 0px;
            color: color(text-icons);
            font-family: Arial;
            font-weight: bold;
            font-size: 1.7rem;
        }
    }
    

    .app-evaluations-cards-container {
        @include apply-flexlayout(row, wrap, flex-start, flex-start);

        margin: 30px 70px 40px 70px;

        mat-card {
            @include configure-flex(40%, 1, 0);

            background: color(text-icons);
            margin: 5px 5px 5px 5px;
            
            color: color(primary-text);
            font-family: 'Roboto', sans-serif;
            font-size: 1rem;

            &:hover {
                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

                button {
                    opacity: 1;
                }
            }

            button {
                right:0;
                
                color: color(primary-text);
                opacity: 0;

                &:hover {
                    color: color(secondary-text, darker);
                }
            }

            mat-card-actions {
                padding: 20px 15px 0px 15px;

                .app-eva-action-buttons button {
                    padding: 5px;
                }

                .app-evaluations-buttons button {
                    background:color(accent);

                    color: color(text-icons);
                    font-family: 'Rajdhani', sans-serif;
                    font-size: 17px;
                    font-weight: bold;
                
                    &:hover {
                        background: color(accent, darker);    
                    }
                }
            }

            mat-card-subtitle {
                color: color(secondary-text);
                text-align: justify;
                text-justify: inter-word;
            }

            mat-card-title {
                font-size: 1.9rem;
                font-weight: normal;
            }

            .tags{
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;

                list-style: none;
            }
            
            .tags li, .tags a{
                height: 24px;

                float: left;
                position: relative;

                font-size: 15px;
                line-height: 24px;
            }
            
            .tags a{
                background: color(accent);

                margin-left: 20px;
                padding: 0px 10px 0px 12px;

                color: color(text-icons);
                font-family: "Quicksand", sans-serif;
                font-weight: bold;
                text-decoration: none;
                
                -moz-border-radius-bottomright: 4px;
                -webkit-border-bottom-right-radius: 4px;	
                border-bottom-right-radius: 4px;
                -moz-border-radius-topright: 4px;
                -webkit-border-top-right-radius: 4px;	
                border-top-right-radius: 4px;	
            }
            
            .tags a:before{
                content: "";
                float: left;
                position: absolute;
                top: 0;
                left: -12px;
                width: 0;
                height: 0;
                border-color: transparent color(accent) transparent transparent;
                border-style: solid;
                border-width: 12px 12px 12px 0;		
            }
            
            .tags a:after{
                content: "";
                position: absolute;
                top: 10px;
                left: 0;
                float: left;
                width: 4px;
                height: 4px;
                -moz-border-radius: 2px;
                -webkit-border-radius: 2px;
                border-radius: 2px;
                background: color(text-icons);
                -moz-box-shadow: -1px -1px 2px color(accent);
                -webkit-box-shadow: -1px -1px 2px color(accent);
                box-shadow: -1px -1px 2px color(accent);
            }
            
            .tags a:hover {
                background: color(accent, darker);
            }
            
            .tags a:hover:before {
                border-color: transparent color(accent, darker) transparent transparent;
            }
        }
    }

    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;
        }
    }
    
}