@import 'node_modules/@wordpress/components/src/tooltip/style.scss';

$space-header-item: 12px;

.transactions-list {
	.date-time {
		min-width: 195px;
	}

	.converted-amount {
		display: flex; // Necessary for conversion tooltip to show.
		justify-content: flex-end;

		.conversion-indicator {
			margin-right: 6px;
			fill: $studio-gray-30;
		}

		&--fallback {
			.components-popover__content {
				position: relative;
				top: -( $gap * 2 ); // Positioning the tooltip in a higher position to avoid having it cropped by the bottom of the table
			}
		}
	}

	// slight adjustment to align header items with sorting button to account for icon width
	.woocommerce-table__header.is-numeric .components-button {
		margin-right: $space-header-item;
	}

	.woocommerce-table__header.is-center-aligned {
		text-align: center;
	}

	.woocommerce-taptopay__icon {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
		background: no-repeat
			url( '../../../assets/images/payment-methods/taptopay.svg' );
		background-size: 16px 16px;
		transform: rotate( 45deg );
		cursor: pointer;
		top: 3px;
		left: 8px;
	}
}

/**
 * Sourced from https://github.com/woocommerce/woocommerce-admin/blob/ec36a00b77b5c0e313985a5a64c88aaec9eb154e/client/analytics/components/report-table/style.scss.
 * Depending on the wc-admin version, these styles are not loaded if not using the analytics report components, so they need to be included here.
 * If we switch to the Report components, we can remove them from here, as they would be loaded by wc-admin.
*/
$gap: 16px;
$gap-small: 12px;
.woocommerce-report-table {
	.woocommerce-search {
		flex-grow: 1;
	}

	.woocommerce-card__header {
		position: relative;
	}

	&.has-compare,
	&.has-search {
		.woocommerce-card__action {
			align-items: center;
			text-align: left;
			display: grid;
			width: 100%;
			grid-template-columns: auto 1fr auto;
		}

		@include breakpoint( '<960px' ) {
			.woocommerce-card__action {
				grid-gap: $gap-small;
				grid-template-columns: auto 1fr;
				grid-row-start: 2;
				grid-row-end: 2;
				grid-column-start: 1;
				grid-column-end: 4;
				margin: 0;

				.woocommerce-table__compare {
					display: flex;
				}

				.woocommerce-search {
					grid-area: 2 / 2 / 3 / 4;
					margin-right: 0;
				}
			}
		}

		&.has-search:not( .has-compare ) {
			.woocommerce-card__action {
				grid-template-columns: 1fr auto;

				.woocommerce-search {
					align-self: center;
					grid-column-start: 1;
					grid-column-end: 2;
				}
			}

			@include breakpoint( '<960px' ) {
				.woocommerce-card__action {
					grid-template-columns: auto;

					.woocommerce-search {
						grid-area: 2 / 1 / 3 / 4;
						margin-left: 0;
					}
				}
			}
		}

		.woocommerce-search {
			margin: 0 $gap;

			.components-base-control {
				&.woocommerce-select-control__control {
					min-height: 38px;
					height: auto;
					button.woocommerce-select-control__clear {
						background-color: #fff;

						&::before {
							content: '';
							position: absolute;
							left: -30px;
							top: -2px;
							bottom: 0;
							width: 30px;
							height: 100%;
							background: linear-gradient(
								to right,
								rgba( 255, 255, 255, 0 ),
								rgba( 255, 255, 255, 1 ) 90%
							);
							pointer-events: none;
						}
					}
				}
			}
		}

		.woocommerce-compare-button {
			padding: 3px $gap-small;
			height: auto;
		}
	}

	.components-card__header {
		// These styles improve the overflow behaviour of the Search component within the TableCard, when many tags are selected. Used for transaction list views. See PR #8996
		.woocommerce-search.woocommerce-select-control
			.woocommerce-select-control__listbox {
			position: relative;
			top: 5px;
		}
		.woocommerce-table__actions {
			justify-content: space-between;

			& > div {
				width: 85%;
				margin-right: 0;
			}

			button.woocommerce-table__download-button {
				@include breakpoint( '<1040px' ) {
					.woocommerce-table__download-button__label {
						display: none;
					}
				}
			}

			.woocommerce-select-control.is-focused
				.woocommerce-select-control__control {
				flex-wrap: wrap;

				.woocommerce-select-control__tags {
					white-space: wrap;
				}
			}
			.woocommerce-select-control__tags {
				overflow-x: auto;
				white-space: nowrap;
				scrollbar-width: none;
				margin-right: 25px;
			}

			.woocommerce-select-control.is-focused
				.components-base-control
				.components-base-control__field {
				flex-basis: 45%;
			}

			@include breakpoint( '<960px' ) {
				.woocommerce-search {
					margin: 0;
				}
			}
		}
	}
}
