@props([
    'type' => 'success',
    'message'
])
<div class="toast align-items-center position-fixed text-bg-{{$type}} border-0 show position-absolute top-0 start-50 translate-middle ms-success" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            <i class="bi bi-check-circle"></i> {{$message}}
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
            aria-label="Close"></button>
    </div>
</div>

@push('styles')
    <style>
        .ms-success{
            z-index: 1300;
            top: 2rem !important;
        }
    </style>
@endpush