.mu-btn {
    cursor: pointer;
    user-select: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: 600;
    padding: 10px 25px;
    text-transform: capitalize;
    gap: 10px;
    position: relative;
    transition: all 0.3s;
    isolation: isolate;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.mu-btn.outline:focus {
    outline: 2px solid rgb(var(--clr, 0, 0, 0));
    outline-offset: 2px;
}
.mu-btn:has(.icon),
.mu-btn.icon {
    padding: 0;
}
.mu-btn .icon {
    width: 36px;
}
.mu-btn i {
    font-size: 0.9em;
}
.mu-btn.btn-loader.loading,
.mu-btn:disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.mu-btn.btn-loader.loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: inherit;
    border-radius: inherit;
}
.mu-btn.btn-loader.loading::after {
    content: "";
    height: 50%;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 100px;
    border: 2px solid rgb(var(--comp));
    border-top: 2px solid transparent;
    z-index: 2;
    opacity: 1;
    animation: rotate 0.5s linear infinite forwards;
}
.mu-btn.effect-press:active {
    transform: translate(1px, 2px);
    box-shadow: var(--shadow-1);
}
.lifted {
    box-shadow: var(--shadow-1);
}
.lifted:hover {
    box-shadow: var(--shadow-2);
}
@keyframes rotate {
    to {
        rotate: 360deg;
    }
}