@import '../inc/variables';
@import '../inc/mixins/grid';
@import '../inc/mixins/mixins';

/* Product block buttons
========================================= */
.wc-block-grid__products {
	margin-bottom: 0;

	.add_to_cart_button {
		@include button;
		@include button-default;
		@include button-sm;
	}

	.wc-block-grid__product-title {
		margin: 15px 0 10px;
		font-size: 18px;
	}

	.wc-block-grid__product-price {
		font-size: 13px;
		display: block;
		margin: 5px 0 15px;
		line-height: 13px;
	 }

	.wc-block-grid__product-onsale {
		z-index: 10;
		position: absolute;
		font-size: 13px;
		text-align: center;
		padding: 3px 12px;
		text-transform: none;
	}

	.wc-block-grid__product-rating {
		margin: -5px auto 10px;
	}

	> .wc-block-grid__product {
		margin-bottom: 50px;
	}
}

/* Reviews
========================================= */
.wc-block-review-list {
	padding-left: 0;

	.wc-block-review-list-item__item {
		margin-bottom: 25px;
	}

	.wc-block-review-list-item__info {
		display: flex;
		flex-direction: row-reverse;
		margin-bottom: 15px;

		.wc-block-review-list-item__image {
			width: 50px;
			height: 50px;
		}

		.wc-block-review-list-item__meta {
			flex-grow: 1;
			align-items: start;
			flex-flow: column;

			.wc-block-review-list-item__author,
			.wc-block-review-list-item__product {
				line-height: normal;
				display: block;
				margin-bottom: 0;
				font-size: 14px;
				font-weight: 700;
			}

			.wc-block-review-list-item__product {
				+ .wc-block-review-list-item__author {
					font-size: 12px;
				}
			}

			.wc-block-review-list-item__rating {
				display: block;
				margin: 10px 0 5px;
				line-height: 1em;
			}

			.wc-block-review-list-item__author + .wc-block-review-list-item__published-date::before {
				display: none;
			}
		}
	}
}

/* Product Grid
========================================= */
.wc-block-product-categories {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		ul {
			margin-left: 15px;
		}
	}

	li {
		line-height: normal;
		display: block;
		position: relative;

		a {
			display: block;
			padding: 10px 30px 10px 0;
			border-bottom: 1px solid $border-color;

			.footer & {
				padding-top: 10px;
				padding-bottom: 10px;
			}
		}

		span,
		.count,
		.ci-count {
			position: absolute;
			background-color: $grey-light;
			color: $text-color;
			right: 0;
			top: 8px;
			height: 24px;
			min-width: 24px;
			line-height: 24px;
			border-radius: 2px;
			text-align: center;
			font-size: 11px;
			font-weight: 700;
		}

		&.current-cat {
			> a {
				font-weight: 700;
			}
		}
	}
}