@use "../variables-site/structure";
@use "../mixins/utilities";

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-search__button {
	@include utilities.button-transition;

	background-color: var(--newspack-theme-color-secondary);
	border: none;
	border-radius: 5px;
	box-sizing: border-box;
	display: inline-block;
	color: var(--newspack-theme-color-against-secondary);
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-sm);
	font-weight: 700;
	line-height: var(--newspack-theme-font-line-height-heading);
	outline: none;
	padding: ( structure.$size__spacing-unit * 0.76 ) structure.$size__spacing-unit;
	text-decoration: none;
	vertical-align: bottom;

	&:hover,
	&:hover:visited {
		background-color: var(--newspack-theme-color-bg-button-hover);
		color: var(--newspack-theme-color-bg-body);
		cursor: pointer;
	}

	&:visited {
		color: inherit;
		text-decoration: none;
	}

	&:focus {
		background-color: var(--newspack-theme-color-bg-button-hover);
		color: var(--newspack-theme-color-bg-body);
		outline: thin dotted;
		outline-offset: -4px;
	}

	&[disabled],
	&[disabled]:hover {
		background-color: var(--newspack-ui-color-neutral-30, #ddd);
		color: var(--newspack-ui-color-neutral-0, #fff);
		cursor: default;
	}
}
