@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.activity-log-item {
	display: flex;
	position: relative;

	@include breakpoint-deprecated( "<480px" ) {
		margin-left: 8px;

		.is-expanded & {
			margin-left: 0;
		}
	}

	.card {
		flex: 1;
		margin-top: 8px;
		margin-bottom: 16px;

		.is-expanded & {
			margin-bottom: 8px;
		}
	}
	a.button,
	button {
		margin-right: 8px;
	}
}

.activity-log-item .foldable-card.card {
	.foldable-card__expand .gridicon {
		transform: none;
	}

	&.is-expanded {
		margin-bottom: 24px;

		.foldable-card__expand .gridicon {
			transform: rotate(180deg);
		}
	}
}

.activity-log-item .foldable-card__header {
	@include breakpoint-deprecated( "<480px" ) {
		padding: 12px;
		display: block;
	}

	// TODO: Remove when foldable cards become "expandable"
	&.is-clickable {
		cursor: default;
	}
}

// Right side of <FoldableCard> is hidden.
// We set up our right side action buttons in .foldable-card__main,
// which gives us more flexibilty with responsive design
.activity-log-item .foldable-card__secondary {
	display: none;
}
// Therefore, we no longer need to reserve 36px for the main section
.activity-log-item .foldable-card__main {
	max-width: 100%;
}

.activity-log-item__type {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: flex-start;
	width: 52px;
	margin: 1px 22px 0 10px;
	padding: 8px 0 6px;
	background: var(--color-surface-backdrop);
	line-height: 1;
	text-align: center;
	z-index: 1;

	@include breakpoint-deprecated( "<480px" ) {
		width: 40px;
		margin: 0 8px 0 0;
	}

	.is-loading & {
		align-self: center;
	}

	.activity-log-item__card.is-expanded & {
		margin-left: 0;
		margin-right: 16px;
		background: var(--color-surface);
	}
}

.activity-log-item__time {
	font-size: $font-body-extra-small;
	color: var(--color-text-subtle);
	text-transform: uppercase;
	white-space: nowrap;

	@include breakpoint-deprecated( "<480px" ) {
		letter-spacing: -1px;
	}
}

.activity-log-item__activity-icon {
	// General notice
	display: flex;
	width: 24px;
	height: 24px;
	margin-top: 4px;
	padding: 12px;
	background: var(--color-neutral-20);
	color: var(--color-text-inverted);
	border-radius: 50%;

	@include breakpoint-deprecated( "<480px" ) {
		box-sizing: border-box;
		display: inline-block;
		width: 32px;
		height: 32px;
		padding: 7px;

		.gridicon {
			width: 18px;
			height: 18px;
		}
	}

	// Success
	&.is-success {
		background: var(--color-success);
	}

	// Warning
	&.is-warning {
		background: var(--color-warning);
	}

	// Error! OHNO!
	&.is-error {
		background: var(--color-error);
	}

	.is-loading & {
		width: 48px;
		height: 48px;
		margin-top: 0;
		padding: 0;
		background-color: var(--color-neutral-10);

		@include breakpoint-deprecated( "<480px" ) {
			width: 32px;
			height: 32px;
			margin: 2px 0 0 2px;
		}
	}
}

.activity-log-item__card {
	min-width: 0;

	.foldable-card__main {
		min-width: 0;

		@include breakpoint-deprecated( "<480px" ) {
			max-width: none;
			margin: 0;
		}
	}

	.foldable-card__content {
		padding: 16px;
		font-size: $font-body-small;
	}

	.is-loading & {
		height: 80px;
		animation: loading-fade 1.6s ease-in-out infinite;
	}
}

.activity-log-item__card-header {
	display: flex;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
	@include break-wide {
		padding-left: 56px;
	}

	@include breakpoint-deprecated( "<960px" ) {
		flex-direction: column;
		align-items: flex-start;
		padding-left: 0;
	}

	@include breakpoint-deprecated( "<480px" ) {
		margin-right: 0;
	}
}

.activity-log-item__actor {
	display: flex;
	margin-right: 32px;
	align-items: center;

	@include break-wide {
		flex: 0 0 180px;
		margin-left: -56px;
	}

	.gravatar,
	.social-logo,
	.server-actor-icon,
	.jetpack-logo {
		float: left;
		width: 40px;
		height: 40px;
		margin-right: 16px;
		fill: var(--color-neutral-40);

		@include breakpoint-deprecated( "<960px" ) {
			width: 32px;
			height: 32px;
			margin-right: 8px;
		}
		@include breakpoint-deprecated( "<480px" ) {
			width: 24px;
			height: 24px;
			margin-right: 8px;
		}
	}

	.social-logo {
		fill: var(--color-text-inverted);
		background: var(--color-wordpress-org);
		border-radius: 50%;
	}

	.jetpack-logo__icon-circle {
		fill: var(--color-neutral-40);
	}

	.gridicon {
		width: 24px;
		height: 24px;
		background: var(--color-neutral-20);
		color: var(--color-text-inverted);
		display: flex;
		padding: 8px;
		border-radius: 50%;
		margin-right: 14px;
		margin-top: 2px;
		fill: var(--color-text-inverted);

		@include breakpoint-deprecated( "<480px" ) {
			padding: 7px;
			box-sizing: border-box;
			width: 32px;
			height: 32px;
			display: inline-block;

			.gridicon {
				width: 18px;
				height: 18px;
			}
		}
	}
}

.activity-log-item__actor-info {
	min-width: 0;
}

.activity-log-item__actor-name {
	font-size: $font-body-small;
	overflow-wrap: break-word;
	word-wrap: break-word;

	@include breakpoint-deprecated( "<960px" ) {
		margin-top: 2px;
		line-height: 1;
	}

	@include breakpoint-deprecated( "<480px" ) {
		display: inline-block;
	}
}

.activity-log-item__actor-role {
	text-transform: capitalize;

	@include breakpoint-deprecated( "<480px" ) {
		display: inline-block;
		margin-left: 8px;
	}
}

.activity-log-item__actor-role,
.activity-log-item__description-summary {
	font-size: $font-body-extra-small;
	color: var(--color-text-subtle);

	@include breakpoint-deprecated( "<480px" ) {
		font-size: $font-body-small;
	}
}

.activity-log-item__description-content {
	margin-bottom: 8px;

	.activity-log-item.is-aggregated & {
		margin-bottom: 0;
	}

	@include breakpoint-deprecated( "<480px" ) {
		font-size: $font-body;
	}
}

.activity-log-item__action {
	display: flex;
	flex-wrap: wrap;

	@include breakpoint-deprecated( "<480px" ) {
		margin-top: 12px;
		text-align: left;
	}

	.button {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.button.is-compact {
		display: flex;
		align-items: center;

		line-height: 1.2;
		text-align: left;

		.gridicon {
			position: static;

			margin: 0 0.5rem 0 0;
		}
	}
}

.activity-log-item__clone-action {
	flex-shrink: 0;
}

.activity-log-item__help-action {
	color: var(--color-neutral-20);
	font-weight: 400;
	font-size: $font-body-small;
	white-space: nowrap;
	padding: 2px 7px 3px;

	@include breakpoint-deprecated( "<480px" ) {
		display: block;
		margin-top: rem(15px);
	}
}

.activity-log-item__help-action .gridicon {
	margin-right: 5px;
}

.button.activity-log-item__quick-action {
	font-size: $font-body-small;
	white-space: nowrap;

	@include breakpoint-deprecated( "<480px" ) {
		display: table;
		margin-top: rem(15px);
	}
}

.activity-log-item__quick-action-success {
	color: var(--color-success);
	animation-name: fade-out-success;
	animation-fill-mode: forwards;
	animation-delay: 2s;
	animation-duration: 2s;
}

.activity-log-item__quick-action-error {
	color: var(--color-error);
}

.activity-log-item__activity-media .gridicon {
	background-color: var(--color-neutral-10);
}
.activity-log-item__activity-media .is-thumbnail {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 48px;
	max-height: 48px;
	overflow: hidden;
	font-size: $font-body-small;
}

.activity-log-item__activity-media .is-full-width {
	width: 100%;
	margin-top: 16px;
}

.activity-log-item__activity-media {
	margin-right: 16px;
	color: var(--color-text-inverted);
	&.is-mobile {
		float: right;
		margin-right: -50px;
		display: block;
		width: 100%;
		height: auto;
		min-width: 0;
	}

	&.is-desktop {
		display: none;
	}

	@include breakpoint-deprecated( ">960px" ) {
		&.is-mobile {
			display: none;
		}

		&.is-desktop {
			display: inline-block;
		}
	}
}

.activity-log-item__footer {
	display: flex;
	justify-content: space-between;
	padding: 16px 0 0;
	margin: 0;
	border-top: 1px solid var(--color-surface-backdrop);

	p {
		margin-bottom: 0;
	}
}

.activity-log-item.is-aggregated > .foldable-card > .foldable-card__header {
	@include breakpoint-deprecated( "<480px" ) {
		padding-right: 44px;
	}
}

@keyframes fade-out-success {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.activity-log-item .foldable-card__action {
	display: flex;
	align-items: center;
	position: static;
}

.activity-log-item__description {
	display: flex;

	// Mobile-Medium: Action buttons under description
	flex-direction: column;
	flex: 1 1 50%;
	font-size: $font-body-small;
	word-break: break-word;
	.activity-log-item__action {
		justify-content: normal;
	}
	.activity-log-item__description-actions {
		padding-top: 8px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	@include breakpoint-deprecated( "<960px" ) {
		margin-top: 8px;
	}

	@include breakpoint-deprecated( "<480px" ) {
		margin-top: 12px;
	}

	@include break-wide {
		// Wide+: Action buttons right of description
		flex-direction: row;
		.activity-log-item__action {
			justify-content: flex-end;
		}
		.activity-log-item__description-actions {
			padding-top: 0;
			justify-content: flex-end;
		}
	}
}

// When side by side, desc = [    text 66%    | act %33 ]
.activity-log-item__description-text {
	flex-grow: 2;
}
.activity-log-item__description-actions {
	flex-grow: 1;
	flex-shrink: 0;

	@include break-wide {
		margin-left: 1rem;
	}
}
