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

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: local(''), url('/poppins-v19-latin-ext_latin_devanagari-regular.woff2') format('woff2'),
		url('/poppins-v19-latin-ext_latin_devanagari-regular.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: local(''), url('/poppins-v19-latin-ext_latin_devanagari-500.woff2') format('woff2'),
		url('/poppins-v19-latin-ext_latin_devanagari-500.woff') format('woff');
}

html {
	@apply h-full min-h-full overflow-y-scroll;
}
body {
	@apply min-h-screen overflow-x-hidden bg-coolblack text-sm text-white scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200;
}

main,
.main {
	width: calc(100% - 4rem);
	margin-left: 4rem;
}

input {
	@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
}
textarea {
	@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
}

#svelte .custom-select-wrapper .selectContainer.disabled input {
	@apply placeholder:text-stone-600;
}

#svelte .custom-select-wrapper .selectContainer input {
	@apply text-white;
}

#svelte .custom-select-wrapper .selectContainer {
	@apply h-12 w-96 rounded border-none bg-coolgray-200 p-2 text-xs font-bold tracking-tight  outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
}

#svelte .listContainer {
	@apply bg-coolgray-400 text-white scrollbar-w-2 scrollbar-thumb-coollabs scrollbar-track-coolgray-200;
}

#svelte .item.hover {
	@apply bg-coollabs text-white !important;
}
#svelte .item.active {
	@apply bg-coolgray-100 text-white;
}

select {
	@apply h-12 w-96 rounded bg-coolgray-200  p-2 text-xs font-bold tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
}
.svelte-select {
	--background: rgb(32 32 32);
	--inputColor: white;
	--multiItemPadding: 0;
	--multiSelectPadding: 0 0.5rem 0 0.5rem;
	--border: none;
	--placeholderColor: rgb(87 83 78);
	--listBackground: rgb(32 32 32);
	--itemColor: white;
	--itemHoverBG: rgb(107 22 237);
	--multiItemBG: rgb(32 32 32);
	--multiClearHoverBG: transparent;
	--multiClearHoverFill: rgb(239 68 68);
	--multiItemActiveBG: transparent;
	--multiClearBG: transparent;
	--clearSelectFocusColor: white;
	--clearSelectHoverColor: rgb(239 68 68);
	--multiItemBorderRadius: 0.25rem;
	--listShadow: none;
}

label {
	@apply inline-block w-64 text-xs tracking-tight md:text-sm;
}

button {
	@apply rounded bg-coolgray-200 p-1 px-2 py-1 text-xs font-bold outline-none transition-all duration-100 hover:bg-coolgray-500 disabled:cursor-not-allowed disabled:bg-coolblack disabled:text-stone-600;
}

a {
	@apply underline hover:text-white;
}

.content {
	@apply p-2 px-4;
}

.title {
	@apply mr-4 text-base tracking-tight md:text-2xl;
}
.nav-main {
	@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] border-r border-stone-800 bg-coolgray-200;
}

.nav-side {
	@apply absolute right-0 top-0 z-50 m-5 flex flex-wrap items-center justify-end space-x-2 bg-coolblack/40 text-white;
}

.add-icon {
	@apply rounded p-1 transition duration-200;
}

.icons {
	@apply rounded p-2 transition duration-200 hover:bg-coolgray-500 disabled:bg-coolblack !important;
}

.arrow-right-applications {
	@apply -ml-6 px-2 font-bold text-green-500;
}

.border-gradient {
	border-bottom: 2px solid transparent;
	-o-border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image-slice: 1;
}
.border-gradient-full {
	border: 4px solid transparent;
	-o-border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image-slice: 1;
}
/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
	position: relative;
	cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
		transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transform: translate3d(0, 0, 0);
	pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
	visibility: visible;
	opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
	z-index: 1001;
	border: 6px solid transparent;
	background: transparent;
	content: '';
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
	z-index: 1000;
	padding: 8px;
	color: #fff;
	content: attr(data-tooltip);
	@apply min-w-[100px] rounded bg-coollabs text-center font-normal;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
	bottom: 100%;
	left: 50%;
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
	margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
	transform: translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
	right: 100%;
	bottom: 50%;
	left: auto;
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
	transform: translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
	top: 100%;
	bottom: auto;
	left: 50%;
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
	transform: translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
	bottom: 50%;
	left: 100%;
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
	transform: translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
	top: 12px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
	margin-left: 0;
	margin-bottom: -16px;
}

.box-selection {
	@apply min-w-[16rem] max-w-[24rem] justify-center rounded-lg border-transparent bg-coolgray-200 p-6 shadow-lg transition duration-150 hover:scale-105 hover:border-transparent hover:bg-coolgray-400;
}

._toastBar {
	@apply hidden !important;
}
._toastMsg {
	@apply text-xs !important;
}
._toastBtn {
	@apply text-xs !important;
}
._toastItem {
	@apply bg-coollabs bg-opacity-80 !important;
}

.lds-heart {
	animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes lds-heart {
	0% {
		transform: scale(1);
	}
	5% {
		transform: scale(1.2);
	}
	39% {
		transform: scale(0.85);
	}
	45% {
		transform: scale(1);
	}
	60% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(0.9);
	}
}