/* /Pages/User/MyRoles.razor.rz.scp.css */
/* 1. Wrapper for the gradient border */
.ai-growth-card-wrapper[b-octzdehybs] {
    padding: 2px; /* Thickness of the border */
    position: relative;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
    /* Standard CSS syntax: Single @ for keyframes */
    background: linear-gradient(-45deg, #8a2be2, #007bff, #dc3545, #8a2be2);
    background-size: 400% 400%;
    animation: gradient-move-b-octzdehybs 3s ease infinite; /* Sped up to 3s to make movement obvious */
}

    /* 2. Target the MudCard (mud-paper) inside */
    /* Note: ::deep is required in .razor.css to affect the MudCard child component */
    .ai-growth-card-wrapper[b-octzdehybs]  .mud-paper {
        border-radius: calc(var(--mud-default-borderradius) - 2px);
        height: 100%;
        background-color: white;
    }

/* Standard CSS syntax: Single @ */
@keyframes gradient-move-b-octzdehybs {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Optional: Hover effect for the arrow button */
.hover-scale[b-octzdehybs] {
    transition: transform 0.2s;
}

    .hover-scale:hover[b-octzdehybs] {
        transform: scale(1.2);
        color: var(--mud-palette-primary);
    }