@import "../_colors";

$alert-summary-color: $primary-dark-text-color !default;
$alert-detail-color: $secondary-dark-text-color !default;
$alert-icon-color: $primary-light-text-color !default;

$alert-success-primary-color: #8bc051 !default;
$alert-success-bg-color: #f7ffe7 !default;

$alert-info-primary-color: #428bca !default;
$alert-info-bg-color: #f1f7f8 !default;

$alert-warning-primary-color: #fcbf10 !default;
$alert-warning-bg-color: #fef4e3 !default;

$alert-error-primary-color: #eb5b5c !default;
$alert-error-bg-color: #fef0f0 !default;

body .ui-messages .ui-messages-summary {
    color: $alert-summary-color;
    display: block;
    margin: 0;
    width: 100%;
}

body .ui-messages .ui-messages-detail {
    color: $alert-detail-color;
    display: block;
    font-size: 13px;
    margin: 0;
    width: 100%;
}

body .ui-messages li span:only-child {
    font-weight: normal;
    font-size: 14px;
    color: $alert-summary-color;
}

body .ui-messages .ui-messages-icon {
    display: flex;
    font-size: 15px;
    left: 15px;
    top: 0;
    position: absolute;
    height: 100%;
    align-items: center;
    justify-content: center;

    &::before {
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $alert-icon-color;
        border-radius: 50%;
    }
}

body .ui-messages .ui-messages-close {
    top: calc(50% - 10px); // Font: 14px + 1.5 de lineHeight
    right: 15px;

    &:focus {
        outline: none;
    }
}

body .ui-messages ul {
    margin-left: 55px;
    margin-right: 25px;
    display: inline-block;
}

body .ui-messages ul > li {
    padding: 0;
}

body .ui-messages ul > li + li {
    margin-top: 10px;
}

body .ui-messages {
    border: none;
    border-left: 5px solid;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    display: flex !important;
    align-items: center;
    padding: 15px;
    min-height: 70px;

    &.ui-messages-success {
        background-color: $alert-success-bg-color;
        border-color: $alert-success-primary-color;

        .ui-messages-icon::before {
            background-color: $alert-success-primary-color;
        }

        .ui-messages-close {
            color: $alert-success-primary-color;
        }
    }

    &.ui-messages-info {
        background-color: $alert-info-bg-color;
        border-color: $alert-info-primary-color;

        .ui-messages-icon::before {
            content: "\f129";
            background-color: $alert-info-primary-color;
        }

        .ui-messages-close {
            color: $alert-info-primary-color;
        }
    }

    &.ui-messages-warn {
        background-color: $alert-warning-bg-color;
        border-color: $alert-warning-primary-color;

        .ui-messages-icon::before {
            background-color: $alert-warning-primary-color;
        }

        .ui-messages-close {
            color: $alert-warning-primary-color;
        }
    }

    &.ui-messages-error {
        background-color: $alert-error-bg-color;
        border-color: $alert-error-primary-color;

        .ui-messages-icon::before {
            background-color: $alert-error-primary-color;
        }

        .ui-messages-close {
            color: $alert-error-primary-color;
        }
    }
}