@use '../../../../shared/utils/token/css/semantic-color';

.a-button {
	cursor: pointer;

	font-size: 24px;
	font-weight: bold;
	text-shadow: 1px 0 semantic-color.$color-solid-grey-1;
	background-color: semantic-color.$color-accent-1;
	border: 0 solid semantic-color.$color-solid-grey-5;
	border-bottom-width: 5px;
	padding: 10px 20px;
	display: inline-block;
	color: semantic-color.$color-solid-white;
	margin: 1rem 0;
	outline: none;
	position: relative;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;

	&[disabled] {
		opacity: 0.4;
		cursor: default;
	}

	&:hover,
	&:focus {
		transform: translate(0, -1px);
		box-shadow: 0 2px 10px rgba(102, 102, 102, 0.5);
	}
	&:active {
		transform: translate(0, 1px);
		box-shadow: none;
	}
}

/* stylelint-disable plugin/stylelint-bem-namics */
.z-button {
	display: block;
}
/* stylelint-enable plugin/stylelint-bem-namics */