:is(a, button).button {
	&.button--yellow {
		background: #ffc107;
		color: #082141;
		border-color: #082141;

		&:is(:hover, :focus-visible) {
			border-color: #205998;
		}
	}

	&.button--dark {
		background: #184171;
		color: #ffffff;
		border-color: #184171;

		&:is(:hover, :focus-visible) {
			border-color: #184171;
			color: #ffffff;
		}
	}

	&.button--large {
		font-size: 1.4em;
	}

	&.button--small {
		padding: 0.25rem 1rem;
	}

	&.button--full-width {
		padding-inline: 0.5em;
		width: 100%;
	}

	&.button--inline {
		display: inline;
		padding: 0.25rem 0.75rem;
	}

	&.button--subtle {
		background-color: #ddd;
		color: #205998;
		border-color: #ddd;

		&:is(:hover, :focus-visible) {
			background: #fff;
		}
	}

	&.button--invisible {
		background: none;
		padding: 0;
		margin: inherit;
		border: 0;
		color: inherit;
		font-size: inherit;
		line-height: inherit;

		&:is(:hover, :focus-visible) {
			background: #9dcffc;
			outline: solid 5px #9dcffc;
		}
	}

	&.button--hover-white:is(:hover, :focus-visible) {
		background: #fff;
		color: #205998;
	}

	&.button.button.button--disabled:is(:hover, :focus-visible) {
		background: #ccc;
		color: #333;
		border-color: #bbb;
	}
}
.button--icon.button--icon {
	background: none;
	border: none;
	color: inherit;
	padding: 0;
	display: inline-block;
	width: auto;
}
/* 
.
.
.
Button Behaviors */
:is(a, button).button.button:is([target="_blank"], [href$=".pdf"], [href$=".zip"]) {
	transition: 200ms padding-inline;
}

:is(a, button).button.button:is([target="_blank"], [href$=".pdf"], [href$=".zip"])::after {
	display: inline-block;
	font: var(--fa-font-solid);
	transition: 200ms all;
	font-size: 0;
	line-height: 0;
	font-weight: bold;
	width: 0;
}

#block-groupcontentmenu ul.nav li .nav-link:is([target="_blank"], [href$=".pdf"], [href$=".zip"])::after {
	font: var(--fa-font-solid);
	font-size: 75%;
	line-height: 0;
	font-weight: bold;
	width: 0;
	position: absolute;
	margin: 0.4em 0 0 0.25rem;
	display: inline-block;
	top: unset;
	right: unset;
}

:is(a, button).button.button:is([target="_blank"], [href$=".pdf"], [href$=".zip"]):is(:hover, :focus-visible) {
	padding-inline: 0.5em;
}
:is(a, button).button.button:is([target="_blank"], [href$=".pdf"], [href$=".zip"]):is(:hover, :focus-visible)::after {
	font-size: 100%;
	width: 1em;
}

/* New Window */
:is(a, button).button.button[target="_blank"]::after,
#block-groupcontentmenu ul.nav li .nav-link[target="_blank"]::after {
	content: " \f35d";
}

/* PDF */
:is(a, button).button.button[href$=".pdf"],
#block-groupcontentmenu ul.nav li .nav-link[href$=".pdf"] {
	padding-inline: 1em;
}
:is(a, button).button.button[href$=".pdf"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".pdf"]::after {
	content: " \f1c1";
}

/* Download/Zip */
:is(a, button).button.button[href$=".zip"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".zip"]::after {
	content: " \f019";
}

#block-groupcontentmenu ul.nav .nav-link:hover,
#block-groupcontentmenu ul.nav .nav-link:focus {
	background: #f7f8fb;
	box-shadow: -80px 0 0 0 #f7f8fb, 50px 0 0 0 #f7f8fb;
}

#block-groupcontentmenu ul.nav ul.show-submenu:has(:hover, :focus) {
	overflow: visible !important;
}

/*





Button 2 */

.button-2 {
	--_skew: var(--skew, 0);
	display: inline-block;
	background: linear-gradient(90deg, #205998, #5b87b4);
	transition: 300ms;
	padding: 1rem 2rem;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	margin-block: 0.25em;
	clip-path: polygon(calc(0.2rem * var(--_skew)) 0%, 100% 0%, calc(100% - calc(0.2rem * var(--_skew))) 100%, 0% 100%);
}

.button-2:hover {
	--_skew: var(--skew-to, 10);
	box-shadow: inset 0 0 0 25px #b6d3ec;
	color: #205998;
	padding-inline: calc(2rem + calc(0.1rem * var(--_skew)));
	margin-inline: calc(-0.1rem * var(--_skew));
	backface-visibility: hidden;
}

.button-skew {
	display: inline-block;
	color: #fff;
	padding: 1rem 2rem;
	text-decoration: none;
	font-weight: bold;
	position: relative;
	isolation: isolate;
}
.button-skew.button--large {
	padding-block: 2rem;
}
.button-skew.button--small {
	padding-block: 0.25rem;
}
a.button-skew[target="_blank"]::after,
a.button-skew[href$=".pdf"]::after,
a.button-skew[href$=".zip"]::after,
a.button-skew[data-button-type="_blank"]::after,
a.button-skew[data-button-type="pdf"]::after,
a.button-skew[data-button-type="zip"]::after {
	font: var(--fa-font-solid);
	transition: 200ms all;
	font-size: 0;
	line-height: 0;
	font-weight: bold;
	width: 0;
}

.button-skew[target="_blank"]:is(:hover, :focus)::after,
.button-skew[href$=".pdf"]:is(:hover, :focus)::after,
.button-skew[href$=".zip"]:is(:hover, :focus)::after,
.button-skew[data-button-type="_blank"]:is(:hover, :focus)::after,
.button-skew[data-button-type="pdf"]:is(:hover, :focus)::after,
.button-skew[data-button-type="zip"]:is(:hover, :focus)::after {
	font-size: 100%;
}

.button-skew[target="_blank"]::after,
.button-skew[data-button-type="_blank"]::after,
#block-groupcontentmenu ul.nav li .nav-link[target="_blank"]::after {
	content: " \f35d";
}

.button-skew[href$=".pdf"]::after,
.button-skew[data-button-type="pdf"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".pdf"]::after {
	content: " \f1c1";
}

.button-skew[href$=".zip"]::after,
.button-skew[data-button-type="zip"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".zip"]::after {
	content: " \f019";
}

.button-skew:visited {
	color: #fff;
}
.button-skew:before {
	content: "";
	display: block;
	position: absolute;
	inset: 0px;
	z-index: -1;
	background: linear-gradient(90deg, #205998 50%, #205998 50%, #5b87b4);
	background-size: 200%;
	background-position-x: 100%;
	transition: background-position-x 300ms 0ms;
}
.button-skew:is(:hover, :focus) {
	color: #fff;
	background: none;
}
.button-skew:hover:before {
	animation: button-skew-in 400ms cubic-bezier(0, 0, 0, 1) forwards;
	background-position-x: 0%;
	transition: background-position-x 300ms 200ms;
}
.button-skew--disabled:before {
	background-size: 260%;
	background-image: linear-gradient(90deg, #666666 40%, #205998 60%, #5b87b4);
}
.button-skew--disabled:hover:before {
	animation: button-skew-disabled 1s cubic-bezier(0.43, 0.43, 0, 0.99) forwards;
	background-position-x: 0%;
	transition: background-position-x 700ms 300ms;
}

@keyframes button-skew-in {
	60% {
		transform: skew(15deg);
	}
	100% {
		transform: skew(-25deg);
	}
}
@keyframes button-skew-disabled {
	100% {
		transform: skew(-25deg);
	}
}
