/**
 * Core Button Block Styles
 *
 * Custom styles for WordPress core block (core/button).
 * Automatically enqueued via wp_enqueue_block_style().
 *
 * @package Smartfire
 */

/* Default Button */
.wp-block-button .wp-block-button__link {
	transition-duration: 0.25s;
	transition-timing-function: ease;

	&:hover {
		transform: scale(1.05);
	}

	&:active {
		transform: scale(0.97);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		transition-duration: 0.1s;
	}
}

/* Liquid Glass Button */
.wp-block-button.is-style-liquid-glass .wp-block-button__link {
	background-color: transparent;
	border: 2px solid transparent;
	color: var(--wp--preset--color--primary-accent);

	--lg-tint: rgba(14, 68, 43, 0.08);
	--lg-tint-hover: rgba(14, 68, 43, 0.12);
	--lg-shine-light: rgba(14, 68, 43, 0.12);
	--lg-shine-dark: rgba(14, 68, 43, 0.06);
	--lg-shadow: 0 2px 12px rgba(14, 68, 43, 0.1);
}

/* Editor styles */
.block-editor-block-list__block {

	.is-style-liquid-glass .wp-block-button__link {
		backdrop-filter: blur(12px);
		background-color: rgba(0, 0, 0, 0.05);
		border: 2px solid rgba(0, 0, 0, 0.05);
	}
}

/* Outline Button */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary-accent);

	&:hover {
		background-color: var(--wp--preset--color--primary-accent);
		color: var(--wp--preset--color--base);
	}
}

.has-background .wp-block-button.is-style-liquid-glass .wp-block-button__link {
	--lg-tint: rgba(255, 255, 255, 0.25);
	--lg-tint-hover: rgba(255, 255, 255, 0.35);
	--lg-shine-light: rgba(255, 255, 255, 0.5);
	--lg-shine-dark: rgba(255, 255, 255, 0.5);
	--lg-shadow: 0 6px 6px rgba(0, 0, 0, 0.02), 0 0 20px rgba(0, 0, 0, 0.02);

	color: var(--wp--preset--color--base);
}

.has-primary-accent-background-color
.wp-block-button.is-style-outline
.wp-block-button__link {
	border-color: var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--border-light);

	&:hover {
		background-color: var(--wp--preset--color--border-light);
		color: var(--wp--preset--color--primary-accent);
	}
}

/* Load More Button */
.wp-block-button .wp-load-more__button {
	padding-left: 34px;
	padding-right: 64px;
	position: relative;
	margin-top: 10px;
	margin-bottom: 80px;

	&::before,
	&::after {
		content: "";
		position: absolute;
		right: 25px;
		top: 50%;
		width: 14px;
		height: 2px;
		background-color: currentcolor;
		transform: translateY(-50%);
		border-radius: 2px;
	}

	&::after {
		transform: translateY(-50%) rotate(90deg);
	}
}
