@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@plugin "daisyui" {
	themes: all;
	root: ':host, :root';
}

* {
	scrollbar-color: rgba(from var(--color-base-200) r g b / 0.5) transparent;
	scrollbar-width: none;
}

html {
	transition: color-scheme 0.3s ease;
}

body {
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

.ccn-btn {
	@apply relative w-full rounded-xl p-2
          transition-all duration-200 ease-out
          hover:-translate-y-0.5 hover:shadow-lg
          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-info/60
          bg-base-200/20 hover:bg-base-200/40;
}

.ccn-btn.is-active {
	@apply bg-info/15 text-info-content;
}

.ccn-inner {
	@apply mx-auto flex flex-col items-center;
}

.ccn-avatar {
	@apply avatar relative;
}

.ccn-hex {
	@apply mask mask-hexagon-2 hover:mask-hexagon w-16 shadow-md ring-1 ring-base-300/60 transition;

	transition: 0.2s cubic-bezier(0.36, 0, 0.63, 1);
	transform: scale(1) rotate(0deg);

	&:hover {
		transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transform: scale(1.25) rotate(720deg);
	}

	&.ccn-hex-large {
		@apply w-32;
	}

	&.ccn-hex-extra-large {
		@apply w-48;
		&:hover {
			transform: scale(2) rotate(-720deg);
		}
	}
}

.ccn-btn:hover .ccn-hex {
	@apply ring-info/50;
}

.ccn-hex .ccn-img,
.ccn-hex svg {
	@apply h-16 w-16 object-cover;
}

.ccn-indicator {
	@apply absolute -right-1 -top-1 h-3 w-3 rounded-full
          bg-info ring-2 ring-base-100;
}

.ccn-name {
	@apply mt-2 block w-full truncate text-center text-[14px] font-extrabold
          text-base-content/80;
}

.ccn-btn:hover .ccn-name {
	@apply text-base-content;
}

#arxlet-container {
	@apply min-h-screen;
}
