/*********************************************************
	buttons
*********************************************************/

button, 
.button,
input[type="submit"] {
	padding: .4375rem 2rem;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: .5rem;
	cursor: pointer;
	font-family: var(--font-label);
	font-weight: 500;
	line-height: 1.5rem;
	letter-spacing: -0.01em;
	color:  var(--true-white);
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
	border-width: 1px;
	border-style: solid;
	border-radius: 1.5em;
	box-shadow: none;
	transition: var(--basic-transition);
}

.button, 
.button:hover {
	text-decoration: none;
}

button:focus,
button:hover,
.button:focus,
.button:hover,
input[type="submit"]:focus {
	gap: 1rem;
	box-shadow: var(--focus-ring-md) var(--brand-primary-highlight);
}

.button-secondary {
	background-color: var(--brand-secondary);
	border-color: var(--brand-secondary);
}

.button-secondary:focus,
.button-secondary:hover {
	box-shadow: var(--focus-ring-md) var(--brand-secondary-highlight);
}

.button-tertiary {
	background-color: var(--brand-tertiary);
	border-color: var(--brand-tertiary);
}

.button-tertiary:focus,
.button-tertiary:hover {
	box-shadow: var(--focus-ring-md) var(--brand-tertiary-highlight);
}

.button-neutral {
	background-color: var(--gray-600);
	border-color: var(--gray-600);
}

.button-neutral:focus,
.button-neutral:hover {
	box-shadow: var(--focus-ring-md) rgba(0, 0, 0, 0.15);
}

.button-primary-darker {
	background-color: var(--brand-primary-darker);
	border-color: var(--brand-primary-darker);
}

.button-inverse {
	color: var(--brand-primary);
	background-color:  var(--true-white);
	border-color:  var(--true-white);
}

.button-inverse:focus,
.button-inverse:hover {
	box-shadow: var(--focus-ring-md) rgba(255, 255, 255, 0.33);
}

.button-outlined {
	color: var(--brand-primary);
	background-color: transparent;
}

.button-secondary.button-inverse,
.button-secondary.button-outlined {
	color: var(--brand-secondary);
}

.button-tertiary.button-inverse,
.button-tertiary.button-outlined {
	color: var(--brand-tertiary);
}

.button-primary-darker.button-inverse,
.button-primary-darker.button-outlined {
	color: var(--brand-primary-darker);
}

.button-neutral.button-inverse,
.button-neutral.button-outlined {
	color: var(--gray-600);
	border-color: var(--gray-400);
}

.button-white.button-outlined {
	color: var(--true-white);
	border-color: var(--true-white);
}

.button-sm {
	padding: .5rem 1.5rem;
	font-size: var(--font-size-sm);
	font-weight: 400;
	line-height: 1rem; 
}

.button-lg {
	padding: 1rem 2rem;
	border-radius: 4rem;
}

.button-icon-only {
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%; 
}

@media (max-width:960px) {

    .button-sm {
        padding: .75rem 1.5rem;
    }
}