@import "../_colors";

$message-icon-color: $primary-light-text-color;
$message-success-primary-color: #0c9348;
$message-success-bg-color: #e0f0f0;
$message-info-primary-color: #428bca;
$message-info-bg-color: #f1f7f8;
$message-warning-primary-color: #fcbf10;
$message-warning-bg-color: #fef4e3;
$message-error-primary-color: #c13018;
$message-error-bg-color: #fef0f0;

@mixin message-warn {
    background-color: $message-warning-primary-color;
    color: $primary-dark-text-color;
}

@mixin message-info {
    background-color: $message-info-primary-color;
}

@mixin message-success {
    background-color: $message-success-primary-color;
}

@mixin message-error {
    background-color: $message-error-primary-color;
}

body .p-message {
    align-items: center;
    border-left: 5px solid;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    min-height: 70px;
    padding: 15px;
    outline: none;

    &-content {
        gap: 15px !important;
        flex: 1;

        .p-button:focus,
        .p-button:active {
            background: inherit !important;
            outline: none;
        }
    }

    &-text {
        gap: 15px;
        display: flex;
        align-items: center;
    }

    .p-message-icon {
        align-items: center;
        display: flex;
        font-size: 15px;
        height: 100%;
        justify-content: center;

        .p-icon-wrapper {
            display: none;
        }

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

    &-success {
        background-color: $message-success-bg-color;
        border-color: $message-success-primary-color;

        .p-message-icon::before {
            @include message-success;
            content: "\f00c";
        }
    }

    &-info {
        background-color: $message-info-bg-color;
        border-color: $message-info-primary-color;

        .p-message-icon::before {
            @include message-info;
            content: "\f129";
        }
    }

    &-warn {
        background-color: $message-warning-bg-color;
        border-color: $message-warning-primary-color;

        .p-message-icon::before {
            @include message-warn;
            content: "\f071";
        }
    }

    &-error {
        background-color: $message-error-bg-color;
        border-color: $message-error-primary-color;

        .p-message-icon::before {
            @include message-error;
            content: "\f00d";
        }
    }

    &-close-button {
        padding: 0 2.5rem 0px 2.5rem;
    }
}

body .p-messages {
    .p-message {
        .p-message-icon {
            width: 40px !important;
            height: 40px !important;
            border-radius: 50%;

            &::before {
                content: none !important;
            }
        }

        &-warn {
            .p-message-icon {
                @include message-warn;
            }
        }

        &-success {
            .p-message-icon {
                @include message-success;
            }
        }

        &-info {
            .p-message-icon {
                @include message-info;
            }
        }

        &-error {
            .p-message-icon {
                @include message-error;
            }
        }
    }
}