.messages {
    color: var(--gin-color-text-light) !important;
    background: var(--gin-bg-layer) !important;
    border: 1px solid var(--gin-border-color-layer) !important;
    box-shadow: var(--gin-shadow-l1) !important;
    padding-left: calc(2.5rem + var(--gin-spacing-m)) !important;

    .messages__header {
        display: none !important;
    }

    .messages__content {
        padding-right: calc(var(--gin-spacing-l) + var(--gin-spacing-xxs));
        margin: unset !important;

        a {
            color: var(--gin-color-text);
        }

        .mail-error-message-links {
            margin-top: var(--gin-spacing-xs);
        }
    }

    .icon-close {
        background-color: var(--gin-color-text) !important;
    }

    .button:hover,
    .button:focus {
        background-color: var(--gin-bg-layer2) !important;
    }

    .messages-icon {
        width: 2.5rem;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        svg {
            font-size: 18px;
            position: absolute;
            left: calc(50% - 9px);
            top: calc(50% - 9px);
        }
    }

    .messages-icon.status-icon {
        background-color: var(--gin-color-green);

        svg {
            color: var(--gin-color-green-light);
        }
    }

    .messages-icon.warning-icon {
        background-color: var(--gin-color-warning);

        svg {
            color: var(--gin-color-warning-light);
        }
    }

    .messages-icon.error-icon {
        background-color: var(--gin-color-danger);

        svg {
            color: var(--gin-color-danger-light);
        }
    }
}