@props(['icon' => 'fas fa-cog', 'color' => 'secondary', 'text' => 'Acciones', 'size' => 'sm'])

<div {{ $attributes->merge(['class' => 'btn-group dropdown-animated']) }}>
    <button type="button" class="btn btn-{{ $color }} btn-{{ $size }} dropdown-toggle shadow-sm font-weight-bold"
        data-toggle="dropdown" aria-expanded="false">
        <i class="{{ $icon }}"></i> {{ $text }}
    </button>
    <div class="dropdown-menu dropdown-menu-right shadow-lg border-0" role="menu">
        {{ $slot }}
    </div>
</div>

@pushonce('css')
<style>
    /* Animación Dropdown */
    .dropdown-animated .dropdown-menu {
        animation: dropdownSlideIn 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform-origin: top right;
        border-radius: 0.5rem;
        padding: 0.5rem 0;
    }

    @keyframes dropdownSlideIn {
        0% {
            opacity: 0;
            transform: scale(0.9) translateY(-10px);
        }

        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    /* Items del menú */
    .dropdown-item {
        padding: 8px 20px;
        transition: background-color 0.1s, color 0.1s;
        font-weight: 500;
        color: #495057;
    }

    .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #007bff;
    }

    .dropdown-item i {
        width: 20px;
        text-align: center;
        margin-right: 10px;
        color: #adb5bd;
    }

    .dropdown-item:hover i {
        color: #007bff;
    }
</style>
@endpushonce