.item-info {
	@apply flex !justify-between w-full p-2 text-xs text-primary-50 bg-primary-800/40 hover:bg-primary-800/60 hover:shadow-lg;
	border-radius: var(--theme-radius);
}

/* DOT */
.dot {
	@apply ml-2 w-1 h-1 p-1 flex rounded-full;
}
.dot[data-active=true]{
	@apply shadow-dot bg-green-400 shadow-green-500/90;
}
.dot[data-active=false]{
	@apply bg-primary-200
}

/* AVATAR */
.avatar {
	@apply bg-primary-950/50 p-0.5 flex items-center justify-center max-w-fit;
	width: var(--avatar-width);
	height: var(--avatar-height);
	border-radius: var(--theme-radius);
}
.avatar .fallback {
	@apply opacity-50 flex object-contain p-0.5;
	width: var(--avatar-width);
	height: var(--avatar-height);
}
.avatar .fallback .icon {
	@apply flex w-full h-full items-center justify-center min-h-full min-w-full max-w-full max-h-full;
}
.avatar img {
	@apply object-contain;
	border-radius: var(--theme-radius);
}

/* CONFIG */
.section--config {
	@apply flex flex-col w-full p-4 bg-primary-800/40 hover:bg-primary-800/60 hover:shadow-lg;
	border-radius: var(--theme-radius);
}
.section--config .section--config--header {
	@apply flex justify-between w-full;
}
.section--config .section--config--description {
	@apply mt-4 text-xs
}
.section--config .section--config--title {
	@apply flex items-center gap-2
}
.section--config .section--config--title--image {
	@apply p-2 bg-primary-950/50 flex justify-center items-center w-[30px] h-[30px];
	border-radius: var(--theme-radius);
}

.section--config .section--config--content {
	@apply flex flex-row gap-1 items-center
}
.section--config .section--config--info-btn {
	@apply  flex items-center justify-center mr-1 text-primary-50 !p-2
}
/* BUTTON SIDEBAR */
.button--sidebar {
	@apply flex items-center !justify-between !py-1 px-4 gap-2 !bg-primary-800;
	border-radius: var(--theme-radius);
}
.button--sidebar[data-active=true] {
	@apply !bg-primary-300 text-primary-900;
}
.button--sidebar:not([data-active=true]) {
	@apply bg-primary-900/50 text-primary-50 border-primary-50/10
}
.button--sidebar--icon-with-title {
	@apply !h-7 -ml-3 !w-7 object-contain flex items-center justify-center bg-primary-50/10;
	border-radius: var(--theme-radius);
}
