@tailwind base;
@tailwind components;

/*vue*/
[v-cloak] {display:none}

/* override element defaults */
b { font-weight:600; }

/* @tailwindcss/forms css */
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='month'],[type='search'],[type='tel'],[type='time'],[multiple],textarea,select
{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:0.5rem 0.75rem;font-size:1rem;line-height:1.5rem}
[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[multiple]:focus,textarea:focus,select:focus{
    outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb}
input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}
input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
select{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}
[multiple]{
    background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;}
[type='checkbox'],[type='radio']{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;
    vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px}
[type='checkbox']{border-radius:0}
[type='radio']{border-radius:100%}
[type='checkbox']:focus,[type='radio']:focus{
    outline:2px solid transparent;outline-offset:2px;
    --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
[type='checkbox']:checked,[type='radio']:checked{
    border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
[type='checkbox']:checked{
    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}
[type='radio']:checked{
    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
    border-color:transparent;background-color:currentColor}
[type='checkbox']:indeterminate{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}
[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
[type='file']:focus{outline:1px auto -webkit-focus-ring-color;}


/* dark mode autocomplete fields */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff;
}
.dark input[data-autocompleted] {
    background-color: transparent !important;
}

/* @tailwindcss/aspect css */
.aspect-h-9 {
    --tw-aspect-h: 9;
}
.aspect-w-16 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 16;
}
.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

[role=dialog].z-10 {
    z-index: 60;
}

/* typesense */
@media (min-width: 720px) {
    .search-dialog {
        transform: translateX(0);
    }
}
@media (min-width: 960px) {
    .search-dialog {
        width: 20rem;
    }
}
.search-dialog input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    width: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' class='w-5 h-5' viewBox='0 0 123.05 123.05' style='enable-background:new 0 0 123.05 123.05'%3E%3Cg%3E%3Cpath d='M121.325,10.925l-8.5-8.399c-2.3-2.3-6.1-2.3-8.5,0l-42.4,42.399L18.726,1.726c-2.301-2.301-6.101-2.301-8.5,0l-8.5,8.5 c-2.301,2.3-2.301,6.1,0,8.5l43.1,43.1l-42.3,42.5c-2.3,2.3-2.3,6.1,0,8.5l8.5,8.5c2.3,2.3,6.1,2.3,8.5,0l42.399-42.4l42.4,42.4 c2.3,2.3,6.1,2.3,8.5,0l8.5-8.5c2.3-2.3,2.3-6.1,0-8.5l-42.5-42.4l42.4-42.399C123.625,17.125,123.625,13.325,121.325,10.925z' fill='%23888' /%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 12px 12px;
}
.search-dialog {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 200;
    flex-direction: column;
    padding: 12vh;
    transition: width 0.1s ease-out 0s, opacity 0.5s ease 0.2s;
}
.search-dialog .dialog {
    margin: 0 auto;
    max-width: 47.375rem;
    min-height: 0;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}
.search-dialog.open {
    display: flex;
}
.search-input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 4.5rem;
    font-weight: 400;
    color: #000;
    margin-left: 1rem;
    margin-right: 1rem;
    flex: auto;
    min-width: 0;
    font-size: 1.5rem;
    border: 0 solid;
}
.search-input::placeholder {
    color: rgb(156, 163, 175);
}
.search-input:focus {
    outline: 2px dotted transparent;
    box-shadow: none;
}
.search-cancel {
    flex: none;
    font-size: 0;
    border-radius: .375rem;
    border: 1px solid #d1d5db;
    padding: .125rem .375rem;
}
.search-cancel:before {
    content: "esc";
    color: #9ca3af;
    font-size: .875rem;
    line-height: 1.25rem;
    cursor: pointer;
}
.search-dialog ::-webkit-scrollbar { width:4px; }
.search-dialog ::-webkit-scrollbar-thumb { background-color:rgb(249, 250, 251); }
.group-item[aria-selected=true], .group-item[aria-selected=true] a, .group-item[aria-selected=true] mark {
    background-color: #42b983;
    box-shadow: inset 0 0 0 2px #42b983;
    cursor: pointer;
    color: white;
}
.group-item a {
    text-decoration: none;
}
.dark mark {
    background-color: rgb(30 58 138);
}
@media (min-width: 720px) {
    .nav {
        display: none;
    }
}

/* global scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 5px
}
::-webkit-scrollbar-thumb {
    background-color: #ccc
}
.dark::-webkit-scrollbar-thumb {
    background-color: rgb(55 65 81); /*bg-gray-700*/
}

@tailwind utilities;