/* also used for form submit buttons for slate */
.button-solid, .form_button_submit {
	font-family: var(--global-font-family);
	font-weight: normal;
	display: block;
	position: relative;
	background-color: var(--color-theme-primary);
	color: var(--color-theme-white);
	border-radius: 22px;
	border: solid 2px var(--color-theme-primary);
	padding-top: 8px;
	padding-right: 44px;
	padding-bottom: 8px;
	padding-left: 21px;
	background-image: url(../../assets/images/solid_arrow_yellow.svg);
	background-position: right 12px center;
	background-size: 20px;
	background-repeat: no-repeat;
	transition: color 0.2s ease-in-out;
}

@media (max-width: 768px) {
	.button-solid {
		padding: 12px 46px 12px 20px;
		flex: unset !important;
	}
}

.button-solid {
	margin-top: 10px;
	margin-bottom: 10px;
}

.button-solid:hover,
.button-solid:focus {
	color: var(--color-theme-yellow);
}


.button-solid::after {
	content: "";
	/* This is the image that shows up on hover. */
	/*background-image: url(../../assets/images/solid_arrow_yellow.svg);*/
	background-size: 160px;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: -75%;
	transition: opacity 0.2s ease-in-out;
}

.button-solid:hover::after,
.button-solid:focus::after {
	opacity: 1;
}

.button-solid.sketches__hover .sketches__block {
	visibility: hidden;
	position: absolute;
	width: 160px;
	bottom: 20%;
	left: 0;
}

.button-solid.sketches__hover:hover .sketches__block {
	visibility: visible;
}

.button-solid.sketches__hover::after {
	display: none;
}

.button-solid.sketches__hover:hover::after,
.button-solid.sketches__hover:focus::after {
	display: none;
	opacity: 0;
}

.button-solid--hover-none::after { display: none; }

.button-solid--color-white {
	color: var(--color-theme-primary);
	border: solid 2px var(--color-theme-primary);
	background-color: var(--color-theme-white);
	background-image: url(../../assets/images/solid_arrow_blue_butler.svg);
}

.button-solid--color-ghost-light {
	color: var(--color-theme-white);
	border: solid 2px var(--color-theme-white);
	background-color: transparent;
	background-image: url(../../assets/images/solid_arrow_white.svg);
}

.button-solid--color-ghost-light:hover,
.button-solid--color-ghost-light:focus {
	border-color: var(--color-theme-yellow);
}

.button-solid--color-ghost-dark {
	color: var(--color-theme-blue);
	border: solid 2px var(--color-theme-blue);
	background-color: transparent;
	background-image: url(../../assets/images/solid_arrow_blue_medium.svg);
}

@media print {
	.button-solid {
		display: none !important;
	}
}