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

:root {
  font-family: $primary-font;
  color: $text-color;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: normal;
    margin: 0 0 30px;
    text-rendering: optimizeLegibility;
    color: $text-color-dark;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 28px;
  }

  h4 {
    font-size: 24px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 16px;
  }
}

a {
	text-decoration: none;
}

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

/* -----------------------------------------
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) {
      border-radius: 3px;
      padding: 30px 30px 30px 85px;
      font-size: 20px;
      line-height: 1.3;
      position: relative;
      border: 0;
      background-color: $grey;

    &::before {
      content: "\201C";
      font-family: Georgia, sans-serif;
      color: $accent-color;
      position: absolute;
      font-size: 96px;
      line-height: 1;
      left: 30px;
      top: 25px;
    }

    cite {
      font-size: 14px;
      display: block;
      font-weight: bold;
      font-style: italic;
      margin: 10px 0 0;
      font-size: 14px;
    }
  }

  &.is-style-large {
    padding: 1em 1em 1em 4em;

    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;

  &.has-text-align-left,
  &.has-text-align-right {
	  max-width: 100%;
  }

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

    &::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: bold;
    text-transform: uppercase;
    font-size: 85%;
	}
}

/* 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;
      white-space: normal;
		}
	}
}

/* Social Links
=================================== */
.wp-block-social-links {
	&.is-style-blockchain-lite-socials {
		gap: 0.2em;

		.wp-block-social-link {
			border-radius: 10%;
		}
	}
}

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

/* Post Types Block
=================================== */
div[data-type="gutenbee/post-types"] {
  .gutenbee-row {
    .gutenbee-post-types-item-meta {
      font-size: 13px;
    }
  }

  .gutenbee-post-types-item-excerpt {
    font-size: 15px;
    margin-bottom: 10px;
    line-height: 1.466666667;
  }
  
  .gutenbee-row-columns-1 {
    .gutenbee-post-types-item-thumb {
      margin-right: 30px;
      width: 300px;
      flex: none;
    }
  }

  .gutenbee-post-types-item-media {
    align-items: stretch;
  }

  @include media-breakpoint-down(sm) {
    .gutenbee-row .gutenbee-post-types-item-media {
      flex-wrap: wrap;

      .gutenbee-post-types-item-thumb {
        margin-right: 0;
        width: 100%;
      }
    }
  }
}

.gutenbee-post-types-item-more {
  font-size: 15px;
  display: inline-block;
  color: $accent-secondary;
  font-weight: 700;

  &::after {
    @include font-awesome('\f105');
    margin-left: 10px;
    color: $accent-color;
    font-size: 1.1em;
    position: relative;
    top: 1px;
  }
}

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

.wp-block-gutenbee-buttons {
  .block-editor-block-list__layout {
    column-gap: 10px;
  }
}

@include media-breakpoint-down(md) {
  .gutenbee-food-menu-columns-mobile-1,
  .gutenbee-food-menu-columns-tablet-1 {
    [data-type="gutenbee/food-menu"] {
      grid-template-columns: auto;
    }
  }  
}

/* 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;
}

/* Accordion Block
=================================== */
.wp-block-gutenbee-accordion-item-title {
	background-color: transparent
}

/* -----------------------------------------
WooCommerce Block Styles
----------------------------------------- */
/* Product Grid
========================================= */
.wc-block-grid { // Overcoming specificity
	.wc-block-grid__products {
		@include make-row($grid-gutter-widths);
	}
}

.wc-block-grid__products {
	.wc-block-grid__product {
		.has-4-columns & {
			@include make-col-ready($grid-gutter-widths);
			@include media-breakpoint-up(xs) {
				@include make-col(12);
			}
			@include media-breakpoint-up(sm) {
				@include make-col(6);
			}
			@include media-breakpoint-up(lg) {
				@include make-col(3);
			}
		}

		.has-3-columns & {
			@include make-col-ready($grid-gutter-widths);
			@include media-breakpoint-up(xs) {
				@include make-col(12);
			}
			@include media-breakpoint-up(sm) {
				@include make-col(6);
			}
			@include media-breakpoint-up(lg) {
				@include make-col(4);
			}
		}

		.has-2-columns & {
			@include make-col-ready($grid-gutter-widths);
			@include media-breakpoint-up(xs) {
				@include make-col(12);
			}
			@include media-breakpoint-up(sm) {
				@include make-col(6);
			}
		}
	}
}

/* Star Ratings
========================================= */
.wc-block-review-list-item__rating__stars,
.wc-block-components-product-rating__stars,
.star-rating {
	overflow: hidden;
	display: inline-block;
	position: relative;
	height: 12px !important;
	width: 68px !important;
	line-height: 12px !important;
	font-size: 12px !important;
	color: $yellow;

	&::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;
		}
	}
}

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

	.wc-block-grid__product-title {
		margin: 10px 0 5px;
		font-size: 18px;   
		margin: 20px 0 10px;
		color: $accent-secondary;
	}

	.wc-block-grid__product-price {
		font-size: 15px;
		display: block;
		margin: 5px 0 20px;
		line-height: 13px;
		color: $text-color;
		font-weight: 400;
	 }

	.wc-block-grid__product-onsale {
		z-index: 20;
		position: absolute;
		padding: 5px 15px;
		top: 10px;
		left: 25px;
		right: auto;
		background-color: $accent-color;
		color: $white;
		text-transform: uppercase;
		font-size: 12px;
		text-align: center;
		border: none;
		border-radius: 0;
		font-weight: 400;
	}

  .wc-block-grid__product {
    .wc-block-components-product-image {
      .wc-block-components-product-sale-badge--align-right {
        right: auto;
        top: 10px;
        left: 10px;
      }
    }
  }

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

	> .wc-block-grid__product {
		margin-bottom: 25px;
		text-align: left;
		border: 0;
	}
}

.wc-block-pagination {
	padding: 40px 0 0;
    margin: 50px 0 0;
    border-top: 1px solid $border-color;

	button {
		border-radius: 0;
		padding: 0;
		min-width: none;
    color:  $accent-secondary;
	}

	a,
	span {
		display: inline-block;
		padding: 4px 14px;
		font-size: 15px;
		margin: 0 2px 3px;
		border: 2px solid transparent;
		background: none;
	}

	.wc-block-pagination-page--active {
		border-color: $accent-secondary;
	}
}

/* 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-review-list-item__author + .wc-block-review-list-item__published-date::before {
				display: none;
			}
		}
	}
}

/* BLOCK: Product Categories
========================================= */
.wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;

	ul {
		margin-left: 15px;
	}

	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;
		}
	}
}

.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;
		}
	}
}

/* BLOCK: Filter by Price
========================================= */
.wc-block-components-price-slider {
	margin-bottom: 0;
}

.wp-block-woocommerce-price-filter {
	.wc-block-price-filter__range-text {
		font-size: 0.875rem;
	}
}

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

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

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

/* BLOCK: Active Filters
========================================= */
.wc-block-active-filters {
	.wc-block-active-filters__list {
		.wc-block-components-chip {
			@include button;
			@include button-sm;
			
			font-size: .875em;
			border-radius: 3px;
			margin-right: 5px;
		}
	}
}