.fill-layer {
	@apply contents;
}

.fill-layer > * {
	@apply relative text-black;
}

.fill-layer > * > * {
	@apply relative;
}

.fill-layer > *::before {
	@apply absolute inset-0 transition-opacity pointer-events-none;
	content: '';
	border-radius: inherit;
}

.fill-layer:not(.no-hover) > *:hover::before {
	@apply opacity-90;
}

.fill-layer:not(.white, .muted-sm, .muted-lg, .info, .accent) > * {
	@apply text-white;
}

.primary > *::before {
	@apply bg-primary;
}

.positive > *::before {
	@apply bg-positive;
}

.negative > *::before {
	@apply bg-negative;
}

.accent > *::before {
	@apply bg-accent;
}

.info > *::before {
	@apply bg-info;
}

.black > *::before {
	@apply bg-black;
}

.white > *::before {
	@apply bg-white;
}

.muted > *::before {
	@apply bg-muted;
}

.muted-sm > *::before {
	@apply bg-muted-sm;
}

.muted-lg > *::before {
	@apply bg-muted-lg;
}