/*@tailwind base;*/
@tailwind components;
@tailwind utilities;

.button-primary {
    @apply text-white bg-black hover:bg-gray-800 dark:bg-gray-100 dark:hover:bg-gray-200 font-bold;
}
.vp-doc a.button-primary {
    @apply text-white dark:text-black;
}

.button-secondary {
    @apply text-gray-800 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700;
}
.vp-doc a.button-secondary {
    @apply text-gray-800 dark:text-gray-200;
}

.button {
    text-decoration-line: none !important;
    @apply px-3 py-2
    text-center
}

.VPNavBar.top, .dark .VPNavBar.top {
    background-color: transparent !important;
    backdrop-filter: none !important;
}
.VPNavBar {
    background-color: rgba(255, 255, 255, .7) !important;
    backdrop-filter: blur(12px);
    transition: background-color 0.3s ease-in-out;
}
.VPNavBar .content-body {
    background-color: transparent !important;
}
.dark .VPNavBar {
    background-color: rgba(0, 0, 0, .7) !important;
}
.VPNavBar .divider {
    transition: background-color 0.3s ease-in-out;
}
.VPNavBar.top .divider, .dark .VPNavBar.top .divider {
    background-color: transparent !important;
}
.VPNavBar:not(.home.top) .divider-line {
    background-color: transparent !important;
}

.VPLocalNav {
    background-color: rgba(255, 255, 255, .5) !important;
    backdrop-filter: blur(12px);
    transition: background-color 0.3s ease-in-out;
}
.dark .VPLocalNav {
    background-color: rgba(0, 0, 0, .5) !important;
}

.VPSidebar {
    background-color: rgba(255, 255, 255, .3) !important;
    backdrop-filter: blur(1px);
    transition: background-color 0.3s ease-in-out;
}
.dark .VPSidebar {
    background-color: rgba(0, 0, 0, .2) !important;
}
.VPSidebar .curtain {
    background-color: transparent !important;
}
.VPSidebar.open {
    background-color: rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(12px);
}
.dark .VPSidebar.open {
    background-color: rgba(0, 0, 0, .9) !important;
}

.VPDocFooter {
    margin-top: 32px !important;
}
