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

@import 'font';
@import 'scrollbar';

$header-height: 5.5rem;

// offsets for header size of 5.5rem
.h-fixed {
	height: calc(100% - #{$header-height});
}

.pt-fixed {
	padding-top: $header-height;
}

.h-header {
	height: $header-height;
	max-height: $header-height;
}

.\@container-size {
	container-type: size;
}

.rdp {
	--rdp-accent-color: theme('colors.primary') !important;
	--rdp-background-color: theme('colors.primary') !important;
}

.rdp-button.rdp-button {
	@apply transition-colors;
	&:hover:not(.rdp-day_selected) {
		@apply text-white;
	}
}

.rdp-day_today.rdp-day_today:not(.rdp-day_selected) {
	@apply bg-secondary bg-opacity-25 font-semibold;
}

.dark .rdp :is(select, option) {
	background-color: black;
}


@layer base {
	:root {
		--background: 275 22% 96%;
		--foreground: 275 5% 10%;
		--card: 275 22% 96%;
		--card-foreground: 275 5% 15%;
		--popover: 275 22% 96%;
		--popover-foreground: 275 95% 10%;
		--primary: 275 100% 30%;
		--primary-foreground: 0 0% 100%;
		--secondary: 275 22% 90%;
		--secondary-foreground: 0 0% 0%;
		--muted: 237 22% 95%;
		--muted-foreground: 275 5% 40%;
		--accent: 237 22% 90%;
		--accent-foreground: 275 5% 15%;
		--destructive: 0 50% 50%;
		--destructive-foreground: 275 5% 96%;
		--border: 275 22% 82%;
		--input: 275 22% 50%;
		--ring: 275 100% 30%;
		--radius: 0.5rem;
	}

	.dark {
		--background: 275 47% 5%;
		--foreground: 275 5% 90%;
		--card: 275 47% 3%;
		--card-foreground: 275 5% 90%;
		--popover: 275 47% 5%;
		--popover-foreground: 275 5% 90%;
		--primary: 275 100% 30%;
		--primary-foreground: 0 0% 100%;
		--secondary: 275 30% 10%;
		--secondary-foreground: 0 0% 100%;
		--muted: 237 30% 15%;
		--muted-foreground: 275 5% 60%;
		--accent: 237 30% 15%;
		--accent-foreground: 275 5% 90%;
		--destructive: 0 50% 30%;
		--destructive-foreground: 275 5% 90%;
		--border: 275 30% 18%;
		--input: 275 30% 18%;
		--ring: 275 100% 30%;
		--radius: 0.5rem;
	}
}
