@import '../variables';

.accelerate__block-list {
	&_wrapper {
		margin: 0;
		box-sizing: border-box;

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
	}

	&_section {
		&--header {
			margin: 0 0 10px;
			padding: 0;
			font-size: 0.75rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: $acc-gray-400;
		}

		&--empty-inline {
			font-weight: 400;
			font-style: italic;
			margin-left: 5px;
		}

		&--available {
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid $acc-gray-200;

			ul {
				min-height: 80px;
			}
		}
	}

	&_empty {
		padding: 15px 10px;
		color: $acc-gray-400;
		font-size: 0.85rem;
		font-style: italic;

		a {
			color: $acc-gray-400;
			text-decoration: underline;

			&:hover,
			&:focus {
				color: $acc-gray-600;
			}
		}
	}

	&_item {
		// Note: transform transitions are handled by useSortable inline styles
		transition: opacity 250ms ease-out;
		animation: accelerate-block-fade-in 250ms ease-out;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 1;
		margin: 0;
		padding: 10px 10px 10px 0;
		border-radius: 7px;

		&--sortable {
			cursor: move;
		}

		&--actions {
			display: flex;
			align-items: center;
		}

		&--thumb {
			flex: 0 0 105px;
			width: 105px;
			height: 47px;
			margin: 0 10px;
			display: flex;
			align-items: center;
			justify-content: center;

			// Constrain any child content (BlockPreview, img, empty placeholder)
			> * {
				width: 105px;
				height: 47px;
				overflow: hidden;
				border-radius: 2px;
				box-shadow: 0 4px 7px 0 rgba(21, 42, 79, 0.2);
			}

			// Empty placeholder styling
			.record-thumbnail__empty {
				background-color: $acc-gray-100;
				box-shadow: none;
			}
		}

		&--details {
			flex: 1;
			margin: 0 10px;
		}

		&--title {
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&--date {
			font-size: 0.65rem;
			color: $acc-gray-400;
			text-transform: uppercase;
			letter-spacing: 0.01em;
		}

		&--meta {
			font-size: 0.8em;
		}
	}

}

// Subtle fade-in animation for blocks when they move between sections
@keyframes accelerate-block-fade-in {
	from {
		opacity: 0.5;
		transform: translateY( 10px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}