@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
	html {
		@apply font-inter selection:bg-primary selection:text-accent scroll-smooth;
	}

	p {
		@apply text-base text-accent1;
	}
}

@layer components {
	.btn {
		@apply bg-primary text-accent border border-primary hover:bg-secondary rounded-std-1/2 px-4 py-1 transition-colors;
	}
	.nav-item {
		@apply w-full relative mb-2;
	}

	.nav-link {
		@apply p-2 rounded-std-1/2 flex justify-between text-accent text-sm items-center capitalize;
	}
	.nav-item:hover .nav-link {
		@apply bg-primary1 transition-colors;
	}
	.nav-item.active .nav-link {
		@apply bg-primary1;
	}

	.nav-item ul li a.active {
		@apply bg-primary1;
	}
	.nav-item ul li a.active i {
		@apply text-accent;
	}

	[data-toggler="active"] {
		@apply after:content-['\f107'] text-accent after:text-lg;
	}
	.active[data-toggler="active"] {
		@apply after:content-['\f077'] text-accent after:text-sm;
	}
	[data-toggler="active"]::after {
		@apply font-bold h-5 w-5 flex items-center justify-center;
		font-family: "Font Awesome 5 Free";
	}
	table th{
		@apply text-[15px] font-semibold text-primary align-middle;
	}
	table td{
		@apply text-sm p-2 align-middle;
	}
	select{
		@apply text-sm min-w-24 px-4 py-1;
	}
	ul li.active {
		@apply text-accent;
	}

	/* Card */
	.card {
		@apply w-full rounded-std bg-white shadow-std;
	}
	.card-header {
		@apply p-4 lg:p-8 pb-0 w-full;
	}
	.card-body {
		@apply p-4 lg:p-8 w-full;
	}
	.card-footer {
		@apply p-6 lg:p-8 w-full;
	}

	/* Form */
	.form-control {
		@apply bg-white font-normal w-full h-auto flex items-center p-3 text-sm rounded-std-1/2 border border-accent focus:outline-none;
	}
	label {
		@apply text-base text-primary font-semibold block mb-2;
	}
	.form-control.invalid-input {
		@apply border-danger;
	}
	.form-control.invalid-input:focus {
		@apply border-danger;
	}

	/* Accordion */
	.accordion .accordion-button.active {
		@apply text-secondary;
	}
	.tab-button.active {
		@apply text-primary;
	}

	/* Map */
	#world_map {
		@apply relative;
	}
	#world_map svg path {
		@apply fill-accent1 hover:fill-secondary;
	}
	.jvm-tooltip {
		@apply absolute text-white;
	}

	select {
		@apply bg-no-repeat bg-[position:98%_50%] appearance-none;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==);
	}
	select::-ms-expand {
		@apply hidden;
	}
}


/* 
	Template Name: {{Free Responsive SmartAiX Data Analytics Tailwind Dashboard Template}}
    Template URL: {{https://designtocodes.com/product/smartaix-data-analytics-tailwind-dashboard-template}}
    Description: {{Start exploring the power of SmartAiX today and experience a new level of data analysis convenience}}
    Author: DesignToCodes
    Author URL: https://www.designtocodes.com
    Text Domain: {{ SmartAiX }}
 */