@import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension

.vrts-test-run-alerts {

	&__heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f0f0f1;
		padding: 0;
		height: 62px;
		overflow: hidden;
		transition: box-shadow 0.2s;

		&[data-is-sticky="true"] {
			box-shadow: 0 1px 0 0 $gray-10;
		}

		a {
			text-decoration: none;
		}

		> * {
			display: flex;
			align-items: center;
			gap: 0.25rem;
		}

		@media (min-width: 851px) {
			padding: 0 20px;
			position: sticky;
			top: -0.1px;
			z-index: 3;
		}

		&-link {
			cursor: pointer;
			position: relative;
			background: transparent;
			border: 0;
			padding: 0;
			min-height: 30px;
			transition: color 0.2s;

			&::before {
				content: "";
				position: absolute;
				top: -5px;
				left: -15px;
				right: -15px;
				bottom: -5px;
			}

			&:hover {
				color: $blue-50;
			}

			&--button {
				color: inherit;
			}
		}
	}

	&__list {
		display: flex;
		gap: 10px;
		padding: 0 10px 10px 10px;
		margin: 0 -10px;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;

		@media (min-width: 851px) {
			flex-direction: column;
			overflow: visible;
			padding: 0 20px;
			margin: 0 0 20px 0;
		}
	}

	&__card {
		box-sizing: border-box;
		background: #fff;
		border: 1px solid $gray-10;
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		transition: all 0.1s;
		box-shadow: inset 0 0 0 1px transparent;
		width: 60%;

		@media (min-width: 480px) {
			width: 40%;
		}

		@media (min-width: 600px) {
			width: 30%;
		}

		@media (min-width: 851px) {
			width: 100%;
		}

		&:has([data-vrts-state="read"]) {
			background: #f6f7f9;
		}

		&:has(:hover),
		&:has([data-vrts-current="true"]) {
			border-color: var(--vrts-admin-theme-color);
			box-shadow: inset 0 0 0 1px var(--vrts-admin-theme-color);
		}

		&:has([data-vrts-current="false"]:focus-visible) {
			border-color: $gray-20;
			box-shadow: inset 0 0 0 1px $gray-20;
		}

		&-link {
			display: block;
			text-decoration: none;
			padding: 10px 10px 0 10px;

			&:focus {
				box-shadow: none;
				outline: none;
			}
		}

		&-figure {
			position: relative;
			background: #f6f7f7;
			border: 1px solid $gray-5;
			aspect-ratio: 1 / 1.15;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			width: 100%;
		}

		&-flag {
			position: absolute;
			top: 10px;
			left: 10px;
			visibility: hidden;

			[data-vrts-false-positive="true"] & {
				visibility: visible;
			}
		}

		&-image {
			position: absolute;
			max-width: 100%;
			max-height: 100%;
		}

		&-title-inner,
		&-path {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&-title {
			display: flex;
			align-items: center;
			gap: 0.3125rem;
			color: $gray-70;
			font-weight: 700;
			margin-top: 12px;
			margin-bottom: 4px;
			text-decoration: none;

			[data-vrts-state="read"] & {
				font-weight: 400;
			}

			[data-vrts-state="unread"] &::after {
				content: "";
				width: 8px;
				height: 8px;
				background: var(--vrts-admin-theme-color);
				border-radius: 50%;
				flex: 0 0 auto;
				margin-top: 1px;
			}
		}

		&-path {
			padding: 10px;
			margin-top: -10px;

			&:focus {
				box-shadow: none;
				outline: none;
			}

			&:focus-visible {
				outline: 2px solid $gray-20;
				outline-offset: -8px;
				text-decoration: none;
			}
		}
	}
}