@tailwind base;
@tailwind components;
@tailwind utilities;


::-webkit-scrollbar-track-piece {
    background-color:transparent;
}
::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(123, 123, 124, 0.28);

}
::-webkit-scrollbar-thumb:hover {
    background-color:rgb(163, 163, 163);
}

body{
    @apply bg-gray-100 text-gray-600 dark:bg-neutral-900 dark:text-neutral-400;
}

a:hover{
    @apply underline underline-offset-4 text-blue-600 dark:text-amber-300;
}

[x-cloak] {
    display: none !important;
}

.card {
    @apply px-3 lg:px-5 py-2 lg:py-3 mb-3 lg:mb-5 w-full rounded bg-white dark:bg-neutral-800 dark:bg-opacity-60 overflow-hidden;
}

.card-title{
    @apply flex items-center font-bold pb-2 mb-2 text-lg text-black dark:text-neutral-200 border-b dark:border-neutral-700 dark:border-opacity-80;
}
.card-title>i{
    @apply inline-block rounded-xl mr-1.5 bg-blue-600 dark:bg-amber-300;
    width:5px; height:14px;
}
.page-title{
    @apply text-3xl font-bold text-black dark:text-neutral-200;
}

article p,
article img{
    margin: 10px auto;
}
article h2,article h3,article h4{
    @apply py-1 pl-2 my-5 font-bold rounded text-black dark:text-white bg-gray-100 dark:bg-neutral-700 border-l-4 border-blue-500 dark:border-amber-300;
}

header a:hover{
    @apply no-underline;
}

nav{
    @apply flex-grow hidden lg:grid grid-flow-col auto-cols-max gap-5 overflow-hidden overflow-x-auto;
}

nav::-webkit-scrollbar {
    height:0;width:0;
}

nav a{
    @apply px-3 block py-1;
}
nav .nav-item.current h2>a,
nav .nav-item:hover h2>a,
nav a:hover{
    @apply bg-gray-100 dark:bg-neutral-600 rounded-sm;
}

.nav-sub{
    @apply static lg:absolute pt-2 z-30;

}

.nav-sub ul{
    @apply p-2 rounded lg:shadow-md bg-white dark:bg-neutral-800  overflow-auto;
    max-height: calc(60vh);
}
.nav-sub ul::-webkit-scrollbar { width: 3px }
.drawer ul{
    @apply dark:bg-transparent;
}
.nav-sub li{
    @apply mb-1;
}
.nav-sub li a{
    @apply px-5;
}

.tags li{
    @apply leading-7 inline-block mr-2 mb-1 rounded-sm overflow-hidden;
}
.tags li>a{
    @apply block px-2 bg-slate-200 dark:bg-stone-800;
}
.tags li>a:hover{
    @apply no-underline bg-slate-300 dark:bg-neutral-700;
}



.list-item{
    @apply mb-4 md:mb-6 pt-4 md:pt-6 grid grid-cols-12 gap-4 text-gray-500 dark:text-neutral-600 overflow-hidden;
}
.list-item .thumbnail{
    @apply col-span-12 md:col-span-4 xl:col-span-3;
}
.list-item .thumbnail>a{
    @apply block overflow-hidden aspect-video rounded lg:rounded-none;
}
.list-item .thumbnail img{
    @apply text-xs object-cover object-center w-full md:max-h-36 aspect-video bg-no-repeat hover:scale-110 transition bg-center bg-gray-200 dark:bg-neutral-700;
    text-indent: -999px;
    background-image:url('data:image/svg+xml,<svg fill="%23939393" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><ellipse cx="373.14" cy="219.33" rx="46.29" ry="46" fill="none"></ellipse><path d="M80 132v328a20 20 0 0 0 20 20h392a20 20 0 0 0 20-20V132a20 20 0 0 0-20-20H100a20 20 0 0 0-20 20zm293.14 41.33a46 46 0 1 1-46.28 46a46.19 46.19 0 0 1 46.28-46zm-261.41 276v-95.48l122.76-110.2L328.27 337l-113 112.33zm368.27 0H259l144.58-144L480 370.59z"></path><path d="M20 32A20 20 0 0 0 0 52v344a20 20 0 0 0 20 20h28V100a20 20 0 0 1 20-20h380V52a20 20 0 0 0-20-20z"></path></svg>');
}
.list-item .description {
    @apply text-sm w-full line-clamp-3 leading-5 text-gray-400 dark:text-neutral-600;
}
.list-item .title{
    @apply block pb-2 w-full lg:truncate font-bold text-xl 2xl:text-2xl text-gray-900 dark:text-neutral-200;
}

.list-item .title a:hover{
    @apply underline underline-offset-8;
}

.list-item .meta{
    @apply mt-1 flex text-sm text-gray-400 dark:text-neutral-500;
}
.list-item .meta>div{
    @apply flex items-center mr-3;
}

.drawer .nav-item{
    @apply p-2;
}
.drawer .nav-item a{
    @apply block p-0;
}

.drawer .nav-item .nav-sub{
    @apply pt-0;
}

.drawer .nav-item .nav-sub ul{
    @apply p-0;
}
.drawer .nav-item .nav-sub ul li{
    @apply mt-1 text-sm pl-2;
}

.drawer ::-webkit-scrollbar {
    width: 4px;
}


.icon{
    display: inline-block;
    width:14px;
    height: 14px;
    vertical-align: -.125em;
    background-repeat: no-repeat;
}

.icon-time{
    background-image: url('data:image/svg+xml,<svg fill="%23939393" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z"></path></svg>');
}
.icon-view{
    background-image: url('data:image/svg+xml,<svg fill="%23939393" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M30.94 15.66A16.69 16.69 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68A16.69 16.69 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68zM16 25c-5.3 0-10.9-3.93-12.93-9C5.1 10.93 10.7 7 16 7s10.9 3.93 12.93 9C26.9 21.07 21.3 25 16 25z"></path><path d="M16 10a6 6 0 1 0 6 6a6 6 0 0 0-6-6zm0 10a4 4 0 1 1 4-4a4 4 0 0 1-4 4z"></path></svg>');
}
.icon-home{
    background-image: url('data:image/svg+xml,<svg fill="%23939393" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M5.693 1.105a.5.5 0 0 1 .614 0l4.114 3.2A1.5 1.5 0 0 1 11 5.49V10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7H5v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5.49c0-.464.214-.9.58-1.185l4.113-3.2zM6 2.133L2.193 5.094A.5.5 0 0 0 2 5.49V10h2V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h2V5.49a.5.5 0 0 0-.193-.396L6 2.134z"></path></g></svg>');
}
.icon-right{
    background-image: url('data:image/svg+xml,<svg fill="%23939393" viewBox="0 -0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"></path></svg>');
}
.icon-tag{
    background-image: url('data:image/svg+xml,<svg fill="%23939393" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/> </svg>');
}
.icon-moon{
    width:20px;height: 20px;
    background-image: url('data:image/svg+xml,<svg fill="%234b5563" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832M512 896c211.2 0 384-172.8 384-384s-172.8-384-384-384S128 300.8 128 512 300.8 896 512 896L512 896zM800 512c0-160-128-288-288-288l0 576C672 800 800 672 800 512zM480 608 243.2 608C249.6 620.8 256 640 262.4 652.8l217.6 0L480 608zM480 416 480 371.2 262.4 371.2C256 384 249.6 403.2 243.2 416L480 416zM480 300.8 480 256 384 256C358.4 268.8 339.2 281.6 320 300.8L480 300.8zM224 537.6l256 0L480 492.8l-256 0c0 6.4 0 12.8 0 19.2S224 524.8 224 537.6zM480 723.2 320 723.2c19.2 19.2 38.4 32 64 44.8l96 0L480 723.2z"></path></svg>')
}
.icon-sun{
    width:20px;height: 20px;
    background-image: url('data:image/svg+xml,<svg fill="%23f9df03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.76 4.84l-1.8-1.79l-1.41 1.41l1.79 1.79zM1 10.5h3v2H1zM11 .55h2V3.5h-2zm8.04 2.495l1.408 1.407l-1.79 1.79l-1.407-1.408zm-1.8 15.115l1.79 1.8l1.41-1.41l-1.8-1.79zM20 10.5h3v2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4s-1.79 4-4 4zm-1 4h2v2.95h-2zm-7.45-.96l1.41 1.41l1.79-1.8l-1.41-1.41z"></path></svg>')
}
.icon-menu{
    width:28px;height:28px;
    background-image: url('data:image/svg+xml,<svg fill="%23939393" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"></path></svg>');
}
