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

@layer components {

	* {
		@apply box-border font-inter;
	}

	body {
		@apply bg-gray-50;
	}

	@font-face {
		font-family: 'bagisto-installer';
		src: url('../fonts/bagisto-installer.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: block;
	}

	[class^="icon-"],
	[class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'bagisto-installer' !important;
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		color: #6B7280;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-limited:before {
		content: "\e900";
	}

	.icon-cross:before {
		content: "\e901";
	}

	.icon-arrow-down:before {
		content: "\e902";
	}

	.icon-right:before {
		content: "\e903";
	}

	.icon-checkbox-active:before {
		content: "\e904";
	}

	.icon-checkbox-normal:before {
		content: "\e905";
	}

	.icon-tick:before {
		content: "\e906";
	}

	.icon-view:before {
		content: "\e907";
	}

	.required:after {
        @apply content-['*'];
	}

	.custom-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent;
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position-x: calc(100% - 10px);
        background-position-y: 50%;
    }

	.primary-button {
        @apply bg-blue-600 border border-blue-700 cursor-pointer flex focus:opacity-[0.9] font-semibold gap-x-1 hover:opacity-[0.9] items-center place-content-center px-3 py-1.5 rounded-md text-gray-50 transition-all;
    }

	[dir="rtl"] .custom-select {
        background-position-x: calc(100% - (100% - 10px));
    }
}