@import "/UI/Theme.scss";

EffectsList
{
	background-color: #222222ee;
	backdrop-filter: blur( 10px );
	border-radius: 8px;
	border: 1px solid #444;
	flex-direction: column;
	max-height: 480px;
	min-height: 480px;
	overflow-y: scroll;

	.list-tabs
	{
		flex-direction: row;
		border-bottom: 1px solid rgba( white, 0.06 );
		flex-shrink: 0;

		.list-tab
		{
			flex-grow: 1;
			font-size: 1rem;
			font-weight: 600;
			font-family: $body-font;
			color: rgba( white, 0.4 );
			padding: 8px 8px;
			text-align: center;
			cursor: pointer;
			transition: color 0.1s ease;

			&:hover
			{
				color: rgba( white, 0.7 );
			}

			&.active
			{
				color: $color-accent;
				border-bottom: 2px solid $color-accent;
			}
		}
	}

	.workshop-search
	{
		padding: 6px 8px;
		border-bottom: 1px solid rgba( white, 0.06 );

		.search-input
		{
			width: 100%;
			background-color: rgba( white, 0.06 );
			border: 1px solid rgba( white, 0.1 );
			border-radius: 4px;
			padding: 5px 8px;
			font-size: 1rem;
			font-family: $body-font;
			color: white;
		}
	}

	.group-header
	{
		font-family: $subtitle-font;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: rgba( white, 0.35 );
		margin-top: 8px;
		margin-bottom: 4px;
		margin-left: 12px;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.empty-state
	{
		font-family: $subtitle-font;
		padding: 16px 12px;
		text-align: center;
	}

	.effect-row
	{
		flex-direction: row;
		align-items: center;
		padding: 6px 8px;
		border-radius: 4px;
		margin: 2px 4px;
		transition: background-color 0.08s ease;
		cursor: pointer;
		flex-shrink: 0;

		.thumb
		{
			width: 28px;
			height: 28px;
			border-radius: 4px;
			background-size: cover;
			background-position: center;
			background-color: rgba( white, 0.05 );
			flex-shrink: 0;

			&.emoji
			{
				background-image: none;
				background-color: rgba( white, 0.07 );
				justify-content: center;
				align-items: center;
				font-size: 1rem;
			}
		}

		.name
		{
			flex-grow: 1;
			font-size: 1rem;
			font-weight: 500;
			font-family: $body-font;
			color: rgba( white, 0.75 );
			margin: 0 8px;
		}

		.info
		{
			flex-grow: 1;
			flex-direction: column;
			justify-content: center;
			margin: 0 8px;

			.name
			{
				flex-grow: 0;
				font-size: 1rem;
				font-weight: 500;
				font-family: $body-font;
				color: rgba( white, 0.75 );
				margin: 0;
			}

			.author
			{
				flex-direction: row;
				align-items: center;
				font-size: 0.9rem;
				font-family: $body-font;
				color: rgba( white, 0.35 );
				margin-top: 2px;

				.author-avatar
				{
					width: 12px;
					height: 12px;
					border-radius: 2px;
					background-size: cover;
					background-position: center;
					background-color: rgba( white, 0.1 );
					margin-right: 4px;
					flex-shrink: 0;
				}
			}
		}

		.toggle
		{
			width: 20px;
			height: 20px;
			border-radius: 4px;
			border: 1.5px solid rgba( white, 0.2 );
			background-color: rgba( black, 0.4 );
			flex-shrink: 0;
			justify-content: center;
			align-items: center;

			.checkmark
			{
				font-size: 12px;
				color: transparent;
			}

			&.on
			{
				border-color: $color-accent;
				background-color: rgba( $color-accent, 0.2 );

				.checkmark
				{
					color: $color-accent;
				}
			}

			&.loading
			{
				opacity: 0.5;
				pointer-events: none;

				.checkmark
				{
					color: rgba( white, 0.5 );
				}
			}

			&:hover
			{
				border-color: rgba( $color-accent, 0.8 );
			}
		}

		&:hover
		{
			background-color: rgba( white, 0.06 );

			.name
			{
				color: white;
			}

			.info .name
			{
				color: white;
			}
		}

		&.selected
		{
			background-color: rgba( $color-accent, 0.1 );

			.name
			{
				color: $color-accent;
			}

			.info .name
			{
				color: $color-accent;
			}

			.thumb
			{
				border: 1px solid rgba( $color-accent, 0.4 );
			}
		}
	}
}