@import "tailwindcss";

select:not([disabled]) {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="%232563eb"/></svg>');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 18px;
}

::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%232563eb" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M6 5V4a1 1 0 1 1 2 0v1h3V4a1 1 0 1 1 2 0v1h3V4a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v2H3V7a2 2 0 0 1 2-2h1ZM3 19v-8h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm5-6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" clip-rule="evenodd"/> </svg> ') !important;
}

html.dark select:not([disabled]) {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="%23facc15"/></svg>');
}

html.dark ::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23fdc700" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M6 5V4a1 1 0 1 1 2 0v1h3V4a1 1 0 1 1 2 0v1h3V4a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v2H3V7a2 2 0 0 1 2-2h1ZM3 19v-8h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm5-6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" clip-rule="evenodd"/> </svg> ') !important;
}

[type=checkbox],
[type=radio] {
    color: var(--color-blue-600) !important;
    --tw-ring-offset-width: 3px !important;
    --tw-ring-offset-color: #ffffff !important;
}

[type=radio]:checked {
    background-size: 1.125rem 1.125rem;
}

[type=checkbox]:focus,
[type=radio]:focus {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
}

.dark [type=checkbox],
.dark [type=radio] {
    color: var(--color-yellow-400) !important;
    --tw-ring-offset-width: 3px !important;
    --tw-ring-offset-color: var(--color-zinc-900) !important;
}

.dark [type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
}

.dark [type=radio]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.countdown-period {
    text-transform: lowercase !important;
}

html h1,
html h2 {
    position: relative;
}

@media (min-width: 768px) {
    html:not(.kontrast) h1.background:before,
    html:not(.kontrast) h2.background:before {
        content: '';
        border-radius: 2px;
        display: block;
        height: calc(100% + 10px);
        left: -5px;
        max-width: 300px;
        position: absolute;
        top: -5px;
        transform: rotate(2deg);
        z-index: -1;
        width: calc(100% + 10px);
    }

    html:not(.dark) h1.background:before,
    html:not(.dark) h2.background:before {
        background: #fbb800;
    }
}