@import "/UI/Theme.scss";

SpawnlistLayoutItem
{
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: rgba( white, 0.58 );
	font-family: $subtitle-font;
	font-weight: 650;
	letter-spacing: 0.5px;
	pointer-events: none;

	.marker-line
	{
		height: 1px;
		flex-grow: 1;
		background: linear-gradient( to right, transparent, rgba( white, 0.18 ) );

		&.right
		{
			background: linear-gradient( to left, transparent, rgba( white, 0.18 ) );
		}

		&.divider-line
		{
			background: linear-gradient( to right, transparent, rgba( white, 0.18 ) 18%, rgba( white, 0.18 ) 82%, transparent );
		}
	}

	IconPanel
	{
		font-size: 16px;
		flex-shrink: 0;
	}

	SpawnlistDragHandle
	{
		width: 26px;
		height: 26px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		cursor: move;
		opacity: 0.45;

		&:hover
		{
			background-color: rgba( white, 0.08 );
			opacity: 1;
		}
	}

	.edit-only
	{
		display: none;
	}

	&.editing
	{
		pointer-events: all;
		.edit-only { display: flex; }

		&:hover
		{
			color: white;
		}
	}
}