@layer reset, theme, color-scheme, app;

@import './reset.css' layer(reset);
@import './blades.css' layer(theme);
@import './blades-color-scheme-pumpkin.css' layer(color-scheme);

@layer reset {
	input[list]::-webkit-calendar-picker-indicator {
		display: none !important;
	}
}

@layer app {
	:root, :host {
		--pico-form-element-spacing-vertical: 0.3rem;
		--pico-form-element-spacing-horizontal: 0.5rem;
		
		--pico-nav-element-spacing-vertical: 0em;
		--pico-nav-element-spacing-horizontal: 0.3em;
		--pico-nav-link-spacing-horizontal: 0.3em;
	}
	
	h1, h2, h3, h4, h5, h6 {
		--pico-typography-spacing-top: 0em;
	}
	
	nav[aria-label="breadcrumb"] {
		margin-bottom: 0.5em;
	}
	
	table.numbered tbody {
		counter-reset: row-num;
		tr {
			counter-increment: row-num;
			td:first-child::before {
				content: counter(row-num);
			}
		}
	}
	
	.link {
		max-width: unset;
		margin: 0em;
		padding: 0em;
		display: inline;
		border: 0px none;
		background-color: unset;
		color: var(--accent);
		text-decoration: underline;
		
		&:enabled:hover {
			background-color: unset;
			text-decoration: none;
		}
	}
	
	input:not([type=checkbox], [type=radio]), button[type=submit] {
		&:is(.link) {
			width: unset;
		}
	}
	
	.dropdown-container {
		position: relative;
		margin-bottom: var(--pico-spacing, 1.5rem);
		
		input {
			margin-bottom: 0;
			width: 100%;
		}
		
		.dropdown-menu {
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			z-index: 10;
			max-height: 260px;
			overflow-y: auto;
			background: var(--pico-background-color, #fff);
			border: 1px solid var(--pico-muted-border-color, #ccc);
			border-radius: var(--pico-border-radius, 4px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		}
	}
	
	.text-left   { text-align: left  ; }
	.text-center { text-align: center; }
	.text-right  { text-align: right ; }
	
	.fit-content {
		flex-shrink: 0;
		width: fit-content;
	}
	
	.truncate {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	input[type="date"].fit-content {
		width: 9.5em;
	}
	
	input[type="number"].no-number-arrows {
		&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		-moz-appearance: textfield;
		appearance: textfield;
	}
}