/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
// Escape forward slashes, otherwise this won't compile
// i.e. .w-1\/3 {}

.wp-block-{{slug}}-inner-block-with-variations {
	// write frontend AND editor SASS here
	{{#noCssFramework}}

	.row-container {
		position: relative;
		overflow: hidden;
	}

	.background {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 0;
	}

	.relative {
		position: relative;
	}
	{{/noCssFramework}}
}
{{#noCssFramework}}

[class*="{{slug}}"] {
	// utility styles for controls

	$spacing-0: 0;
	$spacing-2: 12px;
	$spacing-4: 24px;
	$spacing-8: 32px;
	$spacing-16: 64px;

	--{{slug}}-box-shadow-color: 0,0,0;

	/* Box Shadow */
	--{{slug}}-box-shadow-sm: 0 1px 3px 0 rgba( var( --{{slug}}-box-shadow-color ), 0.1), 0 1px 2px 0 rgba( var( --{{slug}}-box-shadow-color ), 0.06);
	--{{slug}}-box-shadow-md:0 4px 6px -1px rgba( var( --{{slug}}-box-shadow-color ), 0.1), 0 2px 4px -1px rgba( var( --{{slug}}-box-shadow-color ), 0.06);
	--{{slug}}-box-shadow-lg:0 10px 15px -3px rgba( var( --{{slug}}-box-shadow-color ), 0.1), 0 4px 6px -2px rgba( var( --{{slug}}-box-shadow-color ), 0.05);
	--{{slug}}-box-shadow-xl:0 20px 25px -5px rgba( var( --{{slug}}-box-shadow-color ), 0.1), 0 10px 10px -5px rgba( var( --{{slug}}-box-shadow-color ), 0.04);

	// utilities styles for controls
	.h-24 {
		height: 6rem;
	}
	.d-block {
		display: block;
	}
	.flex {
		display: flex;
	}
	.justify-between {
		justify-content: space-between;
	}
	.w-full {
		width: 100%;
	}
	.hover\:bg-gray-200:hover {
		background-color: #edf2f7;
	}

	// float utilities
	.float-right {
		float: right;
	}
	.clearfix::after {
		content: "";
		display: table;
		clear: both;
	}

	// background-attachment utilities
	.bg-scroll {
		background-attachment: scroll;
	}
	.bg-fixed {
		background-attachment: fixed;
	}
	.bg-local {
		background-attachment: local;
	}

	// background-position utilities
	.bg-center {
		background-position: center;
	}
	.bg-bottom {
		background-position: bottom;
	}
	.bg-left {
		background-position: left;
	}
	.bg-left-bottom {
		background-position: left bottom;
	}
	.bg-left-top {
		background-position: left top;
	}
	.bg-right {
		background-position: right;
	}
	.bg-right-bottom {
		background-position: right bottom;
	}
	.bg-right-top {
		background-position: right top;
	}
	.bg-top {
		background-position: top;
	}

	// background-repeat utilities
	.bg-no-repeat {
		background-repeat: no-repeat;
	}
	.bg-repeat {
		background-repeat: repeat;
	}
	.bg-repeat-x {
		background-repeat: x;
	}
	.bg-repeat-y {
		background-repeat: y;
	}
	.bg-repeat-round {
		background-repeat: round;
	}
	.bg-repeat-space {
		background-repeat: space;
	}

	// background-size utilities
	.bg-cover {
		background-size: cover;
	}
	.bg-contain {
		background-size: contain;
	}
	.bg-auto {
		background-size: auto;
	}

	// border-radius utilities
	.rounded-none {
		border-radius: 0;
	}
	.rounded-sm {
		border-radius: 0.125rem;
	}
	.rounded {
		border-radius: 0.25rem;
	}
	.rounded-md {
		border-radius: 0.375rem;
	}
	.rounded-lg {
		border-radius: 0.5rem;
	}
	.rounded-full {
		border-radius: 9999px;
	}

	// border-style utilities
	.border-none {
		border-style: none;
	}
	.border-solid {
		border-style: solid;
	}
	.border-dashed {
		border-style: dashed;
	}
	.border-dotted {
		border-style: dotted;
	}
	.border-double {
		border-style: double;
	}

	// border-width utilities
	.border-0 {
		border-width: 0;
	}
	.border {
		border-width: 1px;
	}
	.border-2 {
		border-width: 2px;
	}
	.border-4 {
		border-width: 4px;
	}
	.border-8 {
		border-width: 8px;
	}

	// opacity utilities
	$max: 100;
	$step: 10;
	@for $i from 0 through ceil($max/$step) {
		.opacity-#{$i*10} {
			opacity: ($i/10);
		}
	}

	// padding utilities
	.p-0 {
		padding: $spacing-0;
	}
	.p-2 {
		padding: $spacing-2;
	}
	.p-4 {
		padding: $spacing-4;
	}
	.p-8 {
		padding: $spacing-8;
	}
	.p-16 {
		padding: $spacing-16;
	}
	.pb-0 {
		padding-bottom: 0;
	}
	.pt-3 {
		padding-top: 0.75rem;
	}
	.px-3 {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	// margin utilities
	.m-0 {
		margin: $spacing-0;
	}
	.m-2 {
		margin: $spacing-2;
	}
	.m-4 {
		margin: $spacing-4;
	}
	.m-8 {
		margin: $spacing-8;
	}
	.m-16 {
		margin: $spacing-16;
	}
	.mb-0 {
		margin-bottom: 0;
	}
	.mb-3 {
		margin-bottom: 0.75rem;
	}
	.mt-5 {
		margin-top: 1.25rem;
	}
	.ml-auto {
		margin-left: auto;
	}
	.mx-auto {
		margin-left: auto;
		margin-right: auto;
	}

	// box-shadow utilities
	.shadow-none {
		box-shadow: none;
	}
	.shadow {
		box-shadow: var(--{{slug}}-box-shadow-sm);
	}
	.shadow-md {
		box-shadow: var(--{{slug}}-box-shadow-md);
	}
	.shadow-lg {
		box-shadow: var(--{{slug}}-box-shadow-lg);
	}
	.shadow-xl {
		box-shadow: var(--{{slug}}-box-shadow-xl);
	}

	// z-index utilities
	.z-0 {
		z-index: 0;
	}
	.z-10 {
		z-index: 10;
	}
}
{{/noCssFramework}}