@import "1-base/base-index";
@import "2-components/forms";
@import "2-components/icons";
@import "2-components/links";
@import "2-components/avatars";
@import "2-components/lists";
@import "2-components/tables";
@import "2-components/widgets";
@import "3-blocks/blocks-index";
@import "4-layout/layout-index";

/* Default paragraph and heading spacing if no individual spacing is set  */
.wp-block-paragraph:not([class*=" pt__"]) {
	@include s-r-7 (padding-top)
}

/* Outer grid margins, temporary solution, will be replaced with editor setting later on */
.wp-block.is-reusable,
.wp-block-group.alignfull>.alignfull,
*[class*="wp-container-"]>.alignfull {
	width: calc(100% + var(--widewidth-outer-gap) + var(--widewidth-outer-gap)) !important;
	max-width: calc(100% + var(--widewidth-outer-gap) + var(--widewidth-outer-gap)) !important;
	margin-left: calc(-1 * var(--widewidth-outer-gap)) !important;
	margin-right: calc(-1 * var(--widewidth-outer-gap)) !important;
}
.wp-block-group.has-background.content-gap,
.site-header,
.site-footer .footer-content {
	padding-left: var(--widewidth-outer-gap);
	padding-right: var(--widewidth-outer-gap);
}

/* Default font size */
.wp-block-paragraph,
.wp-block-list,
.block-editor-default-block-appender p {
	font-size: var(--wp--preset--font-size--medium);
}

/* Tagcloud and Category List in Button Style */
.wp-block-categories.is-style-btn {

	.wp-block-categories__list {
		list-style: none;
		padding-left: 0;
		display: flex;
		flex-wrap: wrap;
	}
}

/* Link underlines */
.wp-block-paragraph,
.wp-block-list {
	a {
		color: currentColor;
		@include underline-default;

		&:hover {
			text-decoration: none;
		}
	}
}

/* Default Button styles */
.wp-block-search .wp-block-search__button {
	min-width: auto !important;
}

.btn-rounded {
	.wp-block-search .wp-block-search__button {
		border-radius: var(--global--border-radius-xxs);
	}
}

.wp-block-tag-cloud.is-style-btn a,
.wp-block-categories.is-style-btn a {
	@include btn;
	@include btn-outline;
	text-decoration: none;
}

.wp-block-tag-cloud.is-style-btn.btn-light a,
.wp-block-categories.is-style-btn.btn-light a {
	@include btn-outline-light;
}

.stretch {
	width: 100% !important;

	.wp-block-ainoblocks-multiple-buttons__inner,
	.wp-block-ainoblocks-button__link {
		width: 100% !important;
	}
}

.btn-xxs {
	@include btn-xxs;
}

.wp-block-tag-cloud.is-style-btn a,
.wp-block-categories.is-style-btn a,
.btn-xs {
	@include btn-xs;
}

.btn-rounded {

	.btn,
	input[type="submit"],
	button[type="submit"],
	a.btn-primary,
	.edit,
	.woocommerce-button,
	.wc-block-components-button,
	.form-submit.wp-block-button input,
	.woocommerce-MyAccount-navigation li a,
	.tag-cloud-link,
	li a {
		border-radius: var(--global--border-radius-xxs);
	}
}

.btn-round {

	.btn,
	.edit,
	input[type="submit"],
	button[type="submit"],
	.woocommerce-button,
	.search-header .search-field,
	.wc-block-components-button,
	.form-submit.wp-block-button input,
	.woocommerce-MyAccount-navigation li a,
	.tag-cloud-link,
	li a {
		border-radius: var(--global--border-radius-round);
	}
}

.site-header {

	.btn-icon {
		margin-top: 1rem !important;

		.wp-block-ainoblocks-button__link {
			display: flex;
			width: 2.5rem;
			height: 2.5rem;
			text-indent: -9000px;
			text-transform: capitalize;
			padding: 0;
			background-repeat: no-repeat;
			background-position: center center;
		}
	}

	.icon-search {

		.wp-block-ainoblocks-button__link {
			background-image: url(/assets/images/search.svg) !important;
		}
	}

	.wp-block-ainoblocks-multiple-buttons {

		.wp-block-ainoblocks-multiple-buttons__inner {
			.btn-icon:not(:first-child) {
				margin-left: var(--space-01);
			}
		}
	}

	&.pro-light-s,
	&.pro-light-l {
		.wp-block-navigation {

			.wp-block-navigation {
				&__responsive-container-open {
					background-image: url(/assets/images/menu.svg) !important;
				}
			}
		}

		.header-content {
			.wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
				width: 0.75rem;
				height: auto;
			}
		}
	}
}

// Primary / Filled Buttons
.wp-block-button,
.wp-block-ainoblocks-button {
	transition: all 0.2s ease-out;
}

.wp-block-button,
.wp-block-ainoblocks-button.is-style-primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--button-color-primary);
	fill: var(--wp--preset--color--button-color-primary);

	&:hover {
		background-color: var(--wp--preset--color--secondary) !important;
		color: var(--wp--preset--color--button-color-primary) !important;
		fill: var(--wp--preset--color--button-color-primary) !important;
	}

	&[class*=" has-variant-"] {

		&:hover {
			background-color: var(--wp--preset--color--variant-secondary) !important;
			color: var(--wp--preset--color--variant-button-color-primary) !important;
			fill: var(--wp--preset--color--variant-button-color-primary) !important;
		}
	}
}

// Outline Buttons
.wp-block-ainoblocks-button.is-style-outline {
	color: var(--wp--preset--color--primary);
	fill: var(--wp--preset--color--primary);

	&:hover {
		background-color: var(--wp--preset--color--button-color-secondary) !important;
		border-color: transparent !important;
	}

	&[class*=" has-variant-"] {
	
		&:hover {
			background-color: var(--wp--preset--color--variant-button-color-secondary) !important;
			border-color: transparent !important;
		}
	}
}

// Ghost / Naked Buttons
.wp-block-ainoblocks-button.is-style-naked {
	color: var(--wp--preset--color--primary);
	fill: var(--wp--preset--color--primary);
	text-decoration: none;

	&:hover {
		color: var(--wp--preset--color--primary) !important;
		background-color: var(--wp--preset--color--button-color-secondary) !important;
	}

	.wp-block-ainoblocks-button__link {
		text-decoration: none;
	}

	&[class*=" has-variant-"] {
	
		&:hover {
			color: var(--wp--preset--color--variant-primary) !important;
			background-color: var(--wp--preset--color--variant-button-color-secondary) !important;
		}
	}
}