.btn{
    @apply p-3 flex flex-row items-center justify-center gap-2 border;
    border-color: white;
    background-color: var(--btn-color);
    color: white;
    &:hover, &.current-menu-item, &.current-page-item, &.current-menu-ancestor ,&.current-menu-parent{
        @apply bg-glass;
        border-color: color-mix(in srgb, var(--btn-color) 80%, black);
    }
}

.btn-outline{
    @apply bg-glass;
   border-color: var(--btn-color);
   color: var(--btn-color);
    &:hover, &.current-menu-item, &.current-page-item, &.current-menu-ancestor ,&.current-menu-parent{
        border-color: color-mix(in srgb, var(--btn-color) 80%, white);
        background-color: var(--btn-color);
        color: black;
    }
}

nav{
    --btn-color: white;
}



.nav-btn{
    @apply btn btn-outline;
}

.btn-druid{
        --btn-color: var(--wp--preset--color--druid);
}

.btn-deathknight{
        --btn-color: var(--wp--preset--color--deathknight);
}

.btn-shaman{
    --btn-color: var(--wp--preset--color--shaman);
}


.btn-hunter{
    --btn-color: var(--wp--preset--color--hunter);
}