@import "../helpers/links";

// Colors, typography, border, padding and shadow set on the block are
// rendered on the link itself (inline style / preset classes), so the rules
// below are only the defaults from the plugin's style settings.
.wp-block-affreviews-affiliate-button {
	display: block;
	width: 100%;
	font-size: var(--affr-button-font-size, 1.25rem);

	&.is-text-link {
		@include affr-text-link;
	}

	.affr-button {
		display: flex;
		justify-content: center;

		.affr-button-el {
			display: block;
			background-color: var(--affr-button-color, #e02928);
			color: var(--affr-button-text-color, #ffffff);
			border-radius: var(--affr-button-radius, 5px);
			padding: var(--affr-button-padding, 12px);
			text-align: center;
			font-size: inherit;
			font-weight: var(--affr-button-font-weight, 700);
			text-decoration: none;
			text-decoration-line: none;
			transition: opacity 300ms ease-out;
			max-width: 320px;
			width: 100%;

			&:hover {
				opacity: 0.6;
				text-decoration-line: none;
				text-decoration-style: none;
			}
		}
	}

	// Alignment
	&.is-content-justification-left {
		.affr-button {
			justify-content: flex-start;
		}

		.affr-link {
			text-align: left;
		}
	}

	&.is-content-justification-center .affr-link {
		text-align: center;
	}

	&.is-content-justification-right {
		.affr-button {
			justify-content: flex-end;
		}

		.affr-link {
			text-align: right;
		}
	}

	// Width: default is full up to 320px.
	&.is-width-auto .affr-button .affr-button-el {
		width: auto;
		max-width: 100%;
	}

	&.is-width-full .affr-button .affr-button-el {
		max-width: none;
	}
}