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

a {
	@apply hover:text-amber-200;
}

.placeholder {
	@apply bg-zinc-700 bg-opacity-40 animate-pulse;
}

.placeholder-image {
	@apply bg-zinc-700 bg-opacity-75;
}

.placeholder-text {
	@apply bg-zinc-700 bg-opacity-40 animate-pulse text-transparent rounded-lg select-none;
}

/*html:not([data-useragent*="Tizen"]) .selectable, html:not([data-useragent*="Tizen"]) .selectable-offset {*/
/*    @apply focus-visible:outline-2;*/
/*}*/

/*html[data-useragent*="Tizen"] .selectable, html[data-useragent*="Tizen"] .selectable-offset {*/
/*    @apply focus-within:outline-2;*/
/*}*/

/*.selectable, .selectable-offset {*/
/*    @apply outline outline-0 outline-primary-500*/
/*}*/

/*.selectable {*/
/*	@apply outline-offset-[-2px] border-2 border-transparent*/
/*}*/

/*.selectable-offset {*/
/*	@apply outline-offset-[2px]*/
/*}*/

html:not([data-useragent*='Tizen']) .selectable {
	@apply focus:border-primary-500 focus-visible:border-primary-500;
}

html[data-useragent*='Tizen'] .selectable {
	@apply focus:border-primary-500 focus-within:border-primary-500;
}

.selectable {
	@apply outline-none outline-0 border-2 border-[#00000000] transition-colors hover:border-primary-500;
}

.selectable:focus,
.selectable:focus-within {
	border-width: 2px;
}

.selectable-secondary {
	@apply outline-none outline-0 border-2 transition-colors hover:border-primary-500;
}

html:not([data-useragent*='Tizen']) .selectable-secondary {
	@apply focus-visible:border-primary-500;
}

html[data-useragent*='Tizen'] .selectable-secondary {
	@apply focus-within:border-primary-500;
}

.selected {
	@apply outline-none outline-0 border-2 border-primary-500;
}

.unselected {
	@apply outline-none outline-0 border-2 border-transparent;
}

.peer-selectable {
	@apply peer-focus-visible:outline outline-2 outline-primary-500 outline-offset-2;
}

.selectable-explicit {
	@apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
}

.h5 {
	@apply font-medium text-lg text-secondary-100;
}

.h4 {
	@apply font-semibold text-xl text-secondary-100;
}

.h3 {
	@apply font-semibold text-2xl text-secondary-100;
}

.h2 {
	@apply font-semibold text-3xl text-secondary-100;
}

.h1 {
	@apply font-semibold text-4xl text-secondary-100 tracking-wider;
}

.body {
	@apply font-medium text-lg text-secondary-300;
}

.h-ghost {
	@apply text-2xl font-semibold text-secondary-500;
}

.error {
	@apply text-red-500;
}

@media tv {
	html {
		font-size: 24px;
	}
}
