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

.btn {
	@apply font-bold py-2 px-4 rounded;
}

.btn-blue {
	@apply bg-blue-500 text-white;
}

.btn-green {
	@apply bg-green-500 text-white;
}

.dropdown-select {
	@apply block w-auto px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.form-field {
	@apply shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none;	
}

.form-label {
	@apply font-bold my-2 mr-3;
}

.hero {
	@apply text-center font-mono text-balance text-4xl font-black tracking-tight text-gray-900 sm:text-6xl;
}

.hero-height {
	line-height: 1.05;
}

.hidden {
	display: none;
}

.link {
	@apply text-blue-600 hover:text-[#00d1cd] hover:underline;
}

.hover-link {
	@apply hover:text-[#00d1cd];
}

.nav-item {
	@apply items-center justify-center flex;
}

.top-header {
	@apply text-center font-bold font-mono text-2xl sm:text-4xl;
}

.pagy {
	@apply flex space-x-1 font-semibold text-sm text-gray-500;
	a:not(.gap) {
	  @apply block rounded-lg px-3 py-1 bg-gray-200;
	  &:hover {
		@apply bg-gray-300;
	  }
	  &:not([href]) { /* disabled links */
		@apply text-gray-300 bg-gray-100 cursor-default;
	  }
	  &.current {
		@apply text-white bg-gray-400;
	  }
	}
	label {
	  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
	  input {
		@apply bg-gray-100 border-none rounded-md;
	  }
	}
  }

.sec-nav {
	@apply text-xs px-2 xs:text-sm xs:px-3 sm:text-base sm:px-4;
}

.show-span {
	@apply flex w-full sm:w-5/6 md:w-2/3;
}

.strong {
	@apply font-medium mb-1;
}

.tag {
	@apply bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-green-400 border border-green-400;
}