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

@font-face {
	font-family: "Inter var";
	font-weight: 100 900;
	font-display: optional;
	font-style: normal;
	font-named-instance: "Regular";
	src: url("/fonts/inter-roman.var.woff2") format("woff2");
}

@font-face {
	font-family: "Inter var";
	font-weight: 100 900;
	font-display: optional;
	font-style: italic;
	font-named-instance: "Italic";
	src: url("/fonts/inter-italic.var.woff2") format("woff2");
}

@font-face {
	font-family: "P22 Mackinac Pro";
	src: url("/fonts/P22MackinacPro-Book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: "P22 Mackinac Pro";
	src: url("/fonts/P22MackinacPro-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: "P22 Mackinac Pro";
	src: url("/fonts/P22MackinacPro-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: "P22 Mackinac Pro";
	src: url("/fonts/P22MackinacPro-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: optional;
}

.font-heading {
	@apply font-mackinac tracking-tight font-bold;
	word-spacing: 0.025em;
}

.divide-y > :first-child {
	@apply border-t;
}

.divide-y > :last-child:not([hidden]) {
	@apply border-b;
}

.h1 {
	@apply text-4xl font-extrabold tracking-tighter;
}

.h2 {
	@apply text-3xl font-extrabold tracking-tighter;
}

.h3 {
	@apply text-3xl font-extrabold;
}

.h4 {
	@apply text-2xl font-extrabold tracking-tight;
}

@screen md {
	.h1 {
		@apply text-5xl;
	}

	.h2 {
		@apply text-4xl;
	}
}

.btn,
.btn-sm {
	@apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out;
}

.btn {
	@apply px-8 py-3;
}

.btn-sm {
	@apply px-4 py-2;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
	@apply bg-white border border-gray-300 focus:border-gray-400;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox {
	@apply rounded;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
	@apply leading-snug py-3 px-4;
}

.form-input,
.form-textarea {
	@apply placeholder-gray-500;
}

.form-select {
	@apply pr-10;
}

.form-checkbox,
.form-radio {
	@apply text-primary-600;
}

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}