/* -----------------------------------------
Editor general styling
----------------------------------------- */
@import "../inc/variables";
@import "../inc/mixins/mixins";

:root {
  font-family: "Source Sans Pro", sans-serif;
  color: $text-color;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

.wp-block {
  max-width: 1290px;
}

/* -----------------------------------------
Gutenberg Blocks
----------------------------------------- */
/* Paragraph Block
=================================== */
.has-drop-cap:not(:focus) {
	&::first-letter {
		padding: 0 .2rem .2rem 0;
		font-size: 4rem;
		line-height: .65;
	}
}

/* Quote Block
========================================= */
.wp-block-quote {
  &:not(.is-style-plain) {
    font-size: 20px;
    position: relative;
    padding-left: 35px;
    border: 0;
    line-height: 1.428571429;
    font-weight: 300;

    &::before {
      content: "\00201C";
      font-size: 4.3em;
      line-height: 0;
      position: absolute;
      left: -10px;
      top: 34px;
      opacity: 0.35;
    }

    cite {
      display: block;
      font-weight: bold;
      font-style: italic;
      margin: 10px 0 0;
      color: rgba($text-color, 0.8);
      font-size: 14px;
    }
  }

  &.is-style-large {
    padding: 0 2em;

    cite {
      font-size: 1.125em;
      text-align: right;
    }
  }
}

/* Pull Quote Block
=================================== */
.wp-block-pullquote {
  font-style: normal;
  padding: 30px 0;
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;

  blockquote {
    font-style: normal;
    padding: 0;
    border: 0;

    &::before {
      display: none;
    }
  }
}

/* Table Block
=================================== */
.wp-block-table {
	table {
		border-width: 1px 0 0 1px;
		margin-bottom: 24px;
	}

	th,
	td {
		border-width: 0 0 1px 0;
		border-bottom-color: $border-color;

		&:first-child {
			padding-left: 0;
		}
	}

	caption,
	th,
	td {
		font-weight: normal;
		padding: 10px;
		vertical-align: middle;
	}

	th {	
		font-weight: 600;
	}
}

/* Button Block
=================================== */
.wp-block-button {
	&.is-style-outline {
		.wp-block-button__link {
			border: 2px solid $accent-color;
			color: $accent-color;
		}
	}

	&:not(.is-style-outline) {
		.wp-block-button__link {
			@include button;
			@include button-md;
		}
	}
}

/* -----------------------------------------
GutenBee Styles
----------------------------------------- */

/* Post Types Block
=================================== */
.wp-block-gutenbee-post-types {
	.gutenbee-post-types-item-thumb {
		img {
			border: 1px solid $border-color;
		}
	}

	.gutenbee-post-types-item-media {
		.gutenbee-post-types-item-thumb {
			margin-right: 30px;
			width: 300px;
			flex: none;
		}
	}

	.gutenbee-post-types-item-title {
		font-weight: normal;
		line-height: normal;
		font-size: 28px;
		letter-spacing: -0.01em;
		margin-bottom: 15px;
	}

	.gutenbee-post-types-item-meta {
		font-size: 16px;
	}

	.gutenbee-post-types-item-more {
		margin-top: 20px;
	}

	.gutenbee-post-types-item-more {
		margin-top: 20px;

		@include button;
		@include button-md;
	}

	.item-product {
		margin-bottom: 30px;
		position: relative;
		border: 1px solid $border-color;
		border-radius: $border-radius-base;

		.item-thumb {
			padding: 15px 15px 0 15px;
		}

		.onsale {
			z-index: 10;
			position: absolute;
			left: auto;
			top: 15px;
			right: 15px;
			text-transform: uppercase;
			font-size: 13px;
			font-weight: 600;
			text-align: center;
			background-color: $accent-color;
			padding: 3px 12px;
			color: #fff;
			border-radius: 3px;
		}

		.item-content {
			min-width: 0;
			padding: 20px 20px 15px;
		}

		.item-meta {
			font-size: 13px;
			line-height: normal;
			margin-bottom: 3px;
			letter-spacing: $letter-spacing-base;

			a {
				color: $text-color-light;
			}
		}

		.item-title {
			margin-top: 0;
			margin-bottom: 10px;
		}
		
		.price {
			display: block;
			font-size: 16px;
			color: $tertiary-text-color;
			margin-bottom: 5px;
			font-weight: 600;
	
			del {
				opacity: .5;
				font-size: 15px;
				margin-right: 3px;
				font-weight: 400;
			}
	
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

/* Testimonial Block
=================================== */
.wp-block-gutenbee-testimonial {
	&::before,
	&::after {
		display: none;
	}

	border-top: 1px solid $border-color;
	border-bottom: 1px solid $border-color;
	padding: 30px 0;
}

/* Heading Block
=================================== */
.wp-block-gutenbee-heading {
	&.is-style-nozama-lite-banner-heading {
		> .block-editor-rich-text__editable {
			font-size: 26px;
			margin: 0;
			line-height: normal;
			letter-spacing: -.01em;
			font-weight: 600;
		}
	}
}

/* Button Block
=================================== */
.wp-block-gutenbee-button {
	div {
		@include button;
		@include button-md;
	}
}

/* -----------------------------------------
WooCommerce Block Styles
----------------------------------------- */

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

	li.wc-block-grid__product {
		margin-bottom: 25px;
		text-align: left;
		position: relative;

		&::before {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			border: 1px solid $border-color;
			border-radius: 3px;
			pointer-events: none;
		}

		.wc-block-grid__product-image {
			padding: 20px;
			margin: 0;

			.wc-block-grid__product-onsale {
				right: 20px;
			}
		}

		.wc-block-grid__product-onsale {
			z-index: 10;
			position: absolute;
			top: 20px !important;
			right: 20px;
			left: auto !important;
			width: auto;
			font-size: 13px;
			text-transform: uppercase;
			text-align: center;
			background-color: $accent-color;
			padding: 3px 12px;
			color: $white;
			border: 0;
			margin: 0;
		}

		.wc-block-grid__product-title {
			margin: 0 20px 5px;
			color:	$text-color-dark;
			font-size: 16px;
			font-weight: 400;
	
			a {
				color: currentColor;
			}
		}

		.wc-block-grid__product-price {
			font-size: 16px;
			display: block;
			margin: 0 20px;
			color: $tertiary-text-color;
			font-weight: 600;
	
			del {
				font-weight: 400;
				opacity: .5;
				font-size: 15px;
				margin-right: 3px;
			}
		 }

		 .wc-block-grid__product-rating {
			margin: 10px 0 0 20px;
		}

		.wc-block-grid__product-add-to-cart {
			width: 0;
			height: 0;
			visibility: hidden;
			margin-bottom: 0;

			> * {
				display: none;
			}
		}

		> :last-child {
			margin-bottom: 20px;
		}
	}
}

.wc-block-pagination {
	margin: 30px 0 0;
	background-color: $grey;
	border-radius: $border-radius-base;
	padding: 10px;
	text-align: center;

	a,
	span {
		margin: 2px 6px;
	}

	.wc-block-pagination-page {
		cursor: pointer;
	}

	.wc-block-pagination-page:hover span,
	.wc-block-pagination-page--active span {
		color: $accent-color;
	}
}

.star-rating,
.wc-block-grid__product-rating__stars {
	margin: 0;
	height: 12px !important;
	display: inline-block;
	position: relative;
	width: 68px !important;
	line-height: 12px !important;
	font-size: 12px !important;
	color: $gold;
	overflow: hidden;

	&::after {
		@include font-awesome(\f005\f005\f005\f005\f005, 'regular');
		float: left;
		top: 0;
		left: 0;
		position: absolute;
	}

	&::before {
		display: none;
	}

	span {
		overflow: hidden;
		float: left;
		top: 0;
		left: 0;
		position: absolute;
		padding-top: 1.5em;

		&::after {
			@include font-awesome(\f005\f005\f005\f005\f005, 'solid');
			top: 0;
			position: absolute;
			left: 0;
		}

		&::before {
			display: none;
		}
	}
}

/* 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;
		margin-bottom: 15px;

		.wc-block-review-list-item__image {
			width: 50px;
			height: 50px;
			margin-right: 15px;

			img {
				border-radius: 3px;
				border: 1px solid $border-color;
			}
		}

		.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: 400;

				a {
					color:$text-color;
				}
			}

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

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

				>.wc-block-components-review-list-item__rating__stars span:before {
					color: $gold;
				}
			}

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

/* BLOCK: Product Categories
========================================= */
.wc-block-product-categories {
	&.is-dropdown {
		display: flex;

		.wc-block-product-categories__dropdown {
			flex: auto;
		}

		select {
			width: 100%;
		}

		.wc-block-product-categories__button {
			border: 1px solid $border-color;
			border-left: 0;
			border-radius: 0;
			padding: 6px;
		}
	}

	.wc-block-product-categories-list {
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: 14px;
	
		li {
			line-height: normal;
			display: block;
			position: relative;
	
			a {
				display: block;
				color: $text-color;
				padding: 11px 30px 11px 0;
				border-bottom: 1px solid $border-color;
			}
	
			.wc-block-product-categories-list-item-count {
				position: absolute;
				right: 0;
				top: 11px;
			}
		}
	}
}

/* BLOCK: Filter by Price
========================================= */
.wp-block-woocommerce-price-filter {
	h3 {
		line-height: normal;
		font-size: 18px;
	}
}

.wc-block-price-filter {
	.wc-block-price-filter__range-input-wrapper {
		.wc-block-price-filter__range-input-progress {
			--range-color: #{$border-color};
		}
	}

	.wc-block-price-filter__controls {
		.wc-block-price-filter__amount {
			border-radius: 0;
			height: auto;
			padding: 7px 14px;
			text-align: center;
			margin-top: 10px;
		}
	}

	.wc-block-price-filter__range-input {
		&.wc-block-components-price-slider__range-input--min {
			z-index: 21;
		}

		&.wc-block-components-price-slider__range-input--max {
			z-index: 20;
		}
	}
}

/* BLOCK: Attribute Filters
========================================= */
.wc-block-attribute-filter {
	.wc-block-attribute-filter-list {
		margin-bottom: 15px;

		label {
			display: inline-block;
			margin-left: 10px;
		}
	}
}
