.btn{
    @apply p-3 flex flex-row items-center justify-center gap-2 border;
    border-color: color-mix(in srgb, var(--btn-color) 80%, white);
    background-color: var(--btn-color);
    color: black;
    &: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);
        color: var(--btn-color);
    }
}

.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;
}