.magnetic-btn {
    position: relative;
    /* box-shadow: inset 0 0 0px 1px rgba(var(--white-color), 0.25); */
    border-radius: 5px;
    background: transparent;
}

.magnetic-btn>li,
.magnetic-btn>button {
    border-radius: inherit;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    border: none;
    color: rgba(var(--white-color), 1);
    transition: transform 0.2s ease;
    touch-action: manipulation;
}

.primary-1 {
    background: var(--primary-color);
}

.primary-2 {
    background: transparent;
    border: 1px solid rgba(var(--white-color), 0.05);
    box-shadow: inset 0 0 15px 0px rgba(var(--white-color), 0.15);
}

.btn-primary {
    padding: 0.75rem 2rem;
    border-radius: 99px;
    background-color: transparent;
    border: 1px solid rgba(var(--secondary-rgb), 0.5);
    color: rgba(var(--white-color), 0.75);
}

.btn-primary.primary-type {
    border: 1px solid rgba(var(--primary-rgb), 0.5);
}