@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../../../dataviews/style" as *;

.dataviews-view-activity {
	margin: 0 0 auto;
	padding: $grid-unit-10 $grid-unit-30;

	.dataviews-view-activity__group-header {
		font-size: $font-size-large;
		font-weight: $font-weight-medium;
		color: $gray-600;
		margin: 0 0 $grid-unit-10 0;
		padding: 0;
	}

	.dataviews-view-activity__item-actions {
		min-width: $grid-unit-30;
	}

	.dataviews-view-activity__item-content {
		flex-grow: 1;

		.dataviews-view-activity__item-title,
		.dataviews-view-activity__item-description,
		.dataviews-view-activity__item-fields {
			min-height: $grid-unit-20;
		}

		.dataviews-view-activity__item-title {
			position: relative;
			display: flex;
			align-items: center;
			flex: 1;
			overflow: hidden;

			&--clickable {
				cursor: pointer;

				&:focus-visible {
					outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
					outline-offset: var(--wp-admin-border-width-focus);
					border-radius: $radius-small;
				}
			}
		}

		.dataviews-view-activity__primary-actions {
			display: flex;
			width: max-content;
			flex: 0 0 auto;

			.components-button {
				position: relative;
				z-index: 1;
			}
		}

		.dataviews-view-activity__item-fields {
			color: $gray-700;
			display: flex;
			gap: $grid-unit-15;
			row-gap: $grid-unit-05;
			flex-wrap: wrap;

			&:empty {
				display: none;
			}

			.dataviews-view-activity__item-field {
				&:has(.dataviews-view-activity__item-field-value:empty) {
					display: none;
				}
			}

			.dataviews-view-activity__item-field-value {
				display: flex;
				align-items: center;
			}
		}
	}

	.dataviews-view-activity__item-type {
		align-self: stretch;
		flex-shrink: 0;

		&::after {
			content: "";
			flex: 1 1 auto;
			width: 1px;
			margin: 0 auto;
			background-color: $gray-300;
		}

		&::before {
			content: "";
			flex: 0 0 auto;
			width: 1px;
			margin: 0 auto;
			background-color: $gray-300;
		}
	}

	.dataviews-view-activity__item {
		&.is-compact {
			.dataviews-view-activity__item-type {
				width: $grid-unit-10;

				&::before {
					height: $grid-unit-15;
				}
			}
			.dataviews-view-activity__item-type-icon {
				width: calc($grid-unit-15 - 1px);
				height: calc($grid-unit-15 - 1px);
			}
			.dataviews-view-activity__item-content {
				margin: $grid-unit-15 0;
			}
		}

		&.is-balanced {
			.dataviews-view-activity__item-type {
				width: $grid-unit-30;

				&::before {
					height: $grid-unit-15;
				}
			}
			.dataviews-view-activity__item-type-icon {
				width: calc($grid-unit-30 + 1px);
				height: calc($grid-unit-30 + 1px);
			}
			.dataviews-view-activity__item-content {
				margin: $grid-unit-15 0;
				padding-top: $grid-unit-10;
			}
		}

		&.is-comfortable {
			.dataviews-view-activity__item-type {
				width: $grid-unit-40;

				&::before {
					height: $grid-unit-10;
				}
			}
			.dataviews-view-activity__item-type-icon {
				width: calc($grid-unit-40 + 1px);
				height: calc($grid-unit-40 + 1px);
			}
			.dataviews-view-activity__item-content {
				margin: $grid-unit-10 0 $grid-unit-20;
				padding-top: $grid-unit-15;
			}
		}

		&.is-comfortable,
		&.is-balanced {
			.dataviews-view-activity__item-bullet {
				width: calc($grid-unit-10 + 1px);
				height: calc($grid-unit-10 + 1px);
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.dataviews-view-activity__item:first-child {
		.dataviews-view-activity__item-type {
			&::before {
				visibility: hidden;
			}
		}
	}

	.dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type,
	& > .dataviews-view-activity__item:last-child {
		.dataviews-view-activity__item-type {
			&::after {
				background: linear-gradient(to bottom, $gray-300 0%, rgba($gray-300, 0.2) 60%, rgba($gray-300, 0) 100%);
			}
		}
	}

	.dataviews-view-activity__item-type-icon {
		overflow: hidden;
		flex-shrink: 0;
		background-color: $white;

		img,
		svg,
		.dataviews-view-activity__item-bullet {
			display: block;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			object-fit: cover;
			border-radius: $radius-round;
			box-sizing: border-box;
			box-shadow: inset 0 0 0 $border-width $gray-300;
		}

		svg {
			padding: $grid-unit-05;
		}

		.dataviews-view-activity__item-bullet {
			content: "";
			background-color: $gray-300;
		}
	}

	&.is-refreshing {
		@include dataviews-refreshing();
	}

	& + .dataviews-pagination {
		justify-content: space-between;
	}
}