@import "angular-material-variables";

#messages {
    // Spaziatura elementi nel riquadro interno alla pagina
    .message {
        @media(min-width: $layout-breakpoint-xs) {
            margin: 16px 16px 0 16px;
        }
    }
}

.messages {
    .message {
        padding: 16px;
        border: 1px solid;

        @media(min-width: $layout-breakpoint-xs) {
            &:not(:first-child) {
                margin-top: 16px;
            }
        }

        .message-text {
            margin: 0;
            font-weight: 300;
            font-size: 16px;
        }

        &.alert-message {
            background: #fdffde;
            border-color: #d6be00;

            .message-text {
                color: #b9a81a;
            }
        }

        &.info-message {
            background: #ddf1ff;
            border-color: #64b8e0;

            .message-text {
                color: #3e89ac;
            }
        }

        &.error-message {
            background: #ffdede;
            border-color: #d42d00;

            .message-text {
                color: #b91a1a;
            }
        }

        &.confirm-message {
            background: #deffe5;
            border-color: #00a900;

            .message-text {
                color: #447719;
            }
        }
    }
}