.wp-block-sortabrilliant-blissful-buttons {
	--accent-color: #000;

	.wp-blissful-buttons__link {
		color: var(--accent-color);
		background-color: #fff;
		display: inline-block;
		padding: 10px 16px;
		border-radius: 40px;
		border: solid 3px var(--accent-color);
		text-decoration: none;
		font-weight: 900;
		font-size: 24px;
		line-height: normal;
		text-decoration: none !important;
		letter-spacing: normal;
		transition: all 0.1s ease-out;
		box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 0;
		margin-right: 4px;
		margin-bottom: 4px;

		&:active {
			transform: scale(0.9);
			box-shadow: inset rgba(0, 0, 0, 0.6) 1px 1px 0px;
		}

		&:hover,
		&:focus {
			text-decoration: none !important;
			transform: scale(1.2);
			box-shadow: rgba(0, 0, 0, 0.1) 6px 6px 0px;
		}
	}
}

.is-style-soft {
	--accent-color: #555;

	.wp-blissful-buttons__link {
		color: var(--accent-color);
		background-color: #fff;
		display: inline-block;
		padding: 20px 26px;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 1px;
		transition: all 0.4s ease-out;
		text-decoration: none !important;
		border-radius: 12px;
		border: none;
		box-shadow: rgba(0, 0, 0, 0.1) 4px 4px 20px;
		text-transform: uppercase;
		margin-right: 10px;

		&:active {
			box-shadow: transparent 3px 3px 10px, inset rgba(0, 0, 0, 0.1) 4px 4px 10px;
			transform: translateY(2px);
			transition: all 0.1s;
			letter-spacing: 1px;
		}

		&:hover,
		&:focus {
			text-decoration: none !important;
			box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 30px;
			opacity: 0.8;
			transform: scale(1.05);
			letter-spacing: 1.5px;
		}
	}
}

.is-style-offset {
	--accent-color: #000;

	.wp-blissful-buttons__link {
		color: var(--accent-color);
		background-color: #fff;
		display: inline-block;
		padding: 6px 12px;
		font-family: Menlo, Consolas, monaco, monospace;
		font-weight: 900;
		line-height: normal;
		letter-spacing: normal;
		border: solid 3px var(--accent-color);
		text-decoration: none !important;
		font-size: 24px;
		border-radius: 0;
		box-shadow: 5px 5px 0 var(--accent-color);
		transition: all 0.15s;
		margin-right: 10px;
		margin-bottom: 10px;

		&:hover,
		&:focus {
			transform: translate(-5px, -5px);
			box-shadow: 10px 10px 0 var(--accent-color);
			text-decoration: none !important;
		}
	}
}