@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

html {
	@apply h-full;
}
body {
	@apply h-full bg-stone-100 text-stone-950 dark:bg-stone-950 dark:text-stone-100;
}

.formelement > label {
	@apply text-xs text-stone-600 uppercase dark:text-stone-400;
}
hr {
	@apply border-stone-200 dark:border-stone-800;
}
h2 {
	@apply mb-4 text-base font-bold;
}

.container {
	@apply mx-auto max-w-3xl;
}

.pointer {
	@apply cursor-pointer;
}
.bt {
	appearance: button;
	@apply cursor-pointer rounded bg-stone-300 px-4 py-1 font-bold hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700;
	&.small {
		@apply px-2 py-1;
	}
}
.menuitem {
	@apply text-stone-950 dark:text-stone-300 hover:dark:text-stone-50;
}

.header {
	@apply py-2 text-lg font-bold;

	/*
	h1 {
		@apply rounded bg-stone-200 px-2 font-bold uppercase dark:bg-stone-800;
	}
	*/

	&.settings {
		h1 {
			@apply rounded border-none bg-sky-200 px-2 text-sky-700 dark:bg-sky-950 dark:text-sky-300;
		}
	}
}

.public h1 {
	@apply mb-4 text-3xl font-bold;
}
.profile a,
.public a {
	@apply text-sky-500;
}

#outer {
	@apply flex h-full flex-row;
}
#main {
	@apply flex w-full flex-col;
}
#sidebar {
	@apply min-w-64 border-r border-r-stone-200 transition-all duration-300 dark:border-stone-800;
}

#content {
	@apply p-2;
}
#hamburgerDesktop,
#hamburgerMobile {
	@apply hidden;
}

@media (width >= 640px) {
	#hamburgerDesktop {
		@apply inline;
	}
	.desktopMenuClosed {
		#sidebar {
			@apply w-10 min-w-10;
		}
	}
}

@media (width < 640px) {
	#hamburgerMobile {
		@apply inline;
	}
	#main {
		@apply ml-10;
	}
	#sidebar {
		@apply fixed left-0 h-full w-full bg-stone-100 dark:bg-stone-950;
	}
	.mobileMenuClosed {
		#sidebar {
			@apply fixed w-10 min-w-10;
		}
	}
}

/* form */

.formgroup {
	@apply rounded border border-stone-300 bg-stone-100 p-2 text-sm dark:border-stone-700 dark:bg-stone-900;
}

.formelement {
	@apply mb-3;
}

.textinput {
	@apply h-8 w-full rounded border-stone-700 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:bg-stone-950 dark:text-stone-100;
}

/* svelte select */

.svelte-select {
	@apply relative flex h-8 w-full border-none text-stone-900 dark:bg-stone-950 dark:text-stone-100;
}

.svelte-select .value-container {
	@apply relative flex-1;
}

.svelte-select input {
	@apply absolute top-0 left-0 m-0 h-8 w-full cursor-default rounded border-stone-700 bg-transparent px-2 py-0 text-sm leading-10 text-stone-100;
}

.svelte-select.focused {
	/* @apply border-blue-600; */
}

.svelte-select.disabled {
	@apply border-gray-200 bg-gray-200 text-gray-600;
}

.svelte-select.disabled input {
	@apply placeholder:text-gray-400 placeholder:opacity-100;
}

.svelte-select > .value-container > .selected-item {
	@apply h-8 overflow-x-hidden px-4 leading-8 focus:outline-none;
}
.svelte-select .hide-selected-item {
	@apply hidden;
}

.svelte-select .indicators {
	@apply pointer-events-none absolute top-0 right-0 bottom-0 flex h-8 translate-y-0 items-center text-gray-200;
}

.svelte-select .icons > * {
	@apply transition-colors duration-200 ease-in-out focus:outline-none;
}

.svelte-select .clear-select {
	@apply pointer-events-auto;
}

.svelte-select.focused .icons,
.svelte-select .chevron:hover,
.svelte-select .clear-select:hover {
	@apply text-gray-600;
}

.svelte-select .clear-select {
	@apply h-5 w-9 flex-none px-2 text-gray-300;
}

.svelte-select .chevron {
	@apply flex h-5 w-9 border-l-2 pt-0 pr-2 pl-2 text-gray-300;
}

.svelte-select.multi {
	@apply h-auto flex-wrap items-stretch pr-9 pl-4;
}

.svelte-select.multi input {
	@apply relative m-0 p-0;
}

.svelte-select.error {
	@apply border-red-500 bg-white;
}

.a11y-text {
	@apply sr-only;
}

.svelte-select-list {
	@apply absolute right-0 left-0 z-10 max-h-64 w-full overflow-y-auto rounded-sm border-none bg-stone-50 shadow-md dark:bg-stone-800;
}

.svelte-select-list .list-group-title {
	@apply h-8 cursor-default px-2 text-sm leading-10 font-medium text-ellipsis whitespace-nowrap text-gray-400 uppercase;
}

.svelte-select-list .empty {
	@apply py-5 text-center text-gray-500;
}

.svelte-select-item {
	@apply h-8 cursor-default overflow-hidden px-5 leading-10 text-ellipsis whitespace-nowrap text-gray-800;
}

.item.group-item {
	@apply px-4;
}

.item.active {
	@apply bg-blue-600 text-white dark:bg-blue-900;
}

.item.not-selectable {
	@apply text-gray-300;
}

.item.first {
	@apply rounded-t-sm;
}

.item.hover:not(.active) {
	@apply bg-blue-100 dark:bg-stone-700;
}

.multi input {
	flex: 1 1 40px;
}

.multi-item {
	@apply mt-1 mr-1 flex h-8 max-w-full cursor-default items-center overflow-hidden rounded-sm border border-gray-200 bg-gray-100 pr-1 pl-1 leading-8 text-ellipsis whitespace-nowrap;
}

.multi-item.disabled {
	@apply hover:bg-gray-300 hover:text-gray-500;
}

.multi-item-clear {
	@apply flex w-5 items-center justify-center;
}

.list-item {
	@apply list-none;
}