@layer components {
    .message {
        @apply flex items-center justify-between w-full p-2 pl-5 bg-gray-100 shadow rounded text-black font-semibold mb-2;

        &.error {
            @apply border-2 border-red-500 bg-red-50;
        }

        &.success {
            @apply border-2 border-green-500 bg-green-50;
        }

        &.info,
        &.notice {
            @apply border-2 border-blue-500 bg-blue-50;
        }

        &.warning {
            @apply border-2 border-yellow-500 bg-yellow-50;
        }

        a {
            @apply underline;
        }
    }
}

.page.messages {
    @apply sticky top-0 z-20;

    .messages section#messages {
        @apply container mx-auto py-3;
    }
}