/* Buttons */

.btn {
	border: none;
	border-radius: var(--button-border-radius);
	box-shadow: none!important;
	font-family: var(--button-font-family);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	line-height: 1;
	outline: none!important;
	overflow: hidden;
	padding: var(--button-padding);
	position: relative;
	text-transform: var(--button-text-transform);
	transition: 0.2s ease-in-out;
}

.btn span {
	display: block;
	overflow: hidden;
	position: relative;
}

.btn:before {
	content: '';
	position: absolute;
	top: -1px; bottom: -1px; left: -5%;
	transform: translateX(-100%) skew(-10deg);
	transition: 0.3s ease-out;
	width: 110%;
}

.btn:hover:before, .navbar-btn-collapse-wrapper.open > button:before {
	transform: translateX(0%) skew(-10deg);
}

.btn.w-100 {
	padding-left: 1rem;
	padding-right: 1rem;
}


/* Solid Buttons */

.btn-primary {
	background-color: var(--color-primary)!important;
	color: var(--button-primary-text-colour)!important;
}

.btn-primary:before {
	background-color: var(--button-primary-hover);
}

.btn-secondary {
	background-color: var(--color-secondary)!important;
	color: var(--button-secondary-text-colour)!important;
}

.btn-secondary:before {
	background-color: var(--button-secondary-hover);
}

.btn-tertiary {
	background-color: var(--color-tertiary)!important;
	color: var(--button-tertiary-text-colour)!important;
}

.btn-tertiary:before {
	background-color: var(--button-tertiary-hover);
}

.btn-quaternary {
	background-color: var(--color-quaternary)!important;
	color: var(--button-quaternary-text-colour)!important;
}

.btn-quaternary:before {
	background-color: var(--button-quaternary-hover);
}

.btn-white {
	background-color: #fff;
	color: var(--color-body)!important;
}

.btn-white:before {
	background-color: rgba(0,0,0,0.05);
}


/* Outlined Buttons */

.btn-primary.outlined {
	background-color: transparent!important;
	box-shadow: inset 0px 0px 0px var(--button-outline-border-width) var(--color-primary)!important;
	color: var(--color-primary)!important;
}

.btn-primary.outlined:hover {
	color: var(--button-primary-text-colour)!important;
}

.btn-primary.outlined:hover:before {
	background-color: var(--color-primary)!important;
}

.btn-secondary.outlined {
	background-color: transparent!important;
	box-shadow: inset 0px 0px 0px var(--button-outline-border-width) var(--color-secondary)!important;
	color: var(--color-secondary)!important;
}

.btn-secondary.outlined:hover {
	color: var(--button-secondary-text-colour)!important;
}

.btn-secondary.outlined:hover:before {
	background-color: var(--color-secondary)!important;
}

.btn-tertiary.outlined {
	background-color: transparent!important;
	box-shadow: inset 0px 0px 0px var(--button-outline-border-width) var(--color-tertiary)!important;
	color: var(--color-tertiary)!important;
}

.btn-tertiary.outlined:hover {
	color: var(--button-tertiary-text-colour)!important;
}

.btn-tertiary.outlined:hover:before {
	background-color: var(--color-tertiary)!important;
}

.btn-quaternary.outlined {
	background-color: transparent!important;
	box-shadow: inset 0px 0px 0px var(--button-outline-border-width) var(--color-quaternary)!important;
	color: var(--color-quaternary)!important;
}

.btn-quaternary.outlined:hover {
	color: var(--button-quaternary-text-colour)!important;
}

.btn-quaternary.outlined:hover:before {
	background-color: var(--color-quaternary)!important;
}

.btn-white.outlined {
	background-color: transparent!important;
	box-shadow: inset 0px 0px 0px var(--button-outline-border-width) #fff!important;
	color: #fff!important;
}

.btn-white.outlined:hover {
	color: var(--color-body)!important;
}

.btn-white.outlined:hover:before {
	background-color: #fff!important;
}



/* Underlined Button */

.btn-underline {
	border: none;
	border-bottom: 1px solid var(--color-body);
	border-radius: 0;
	padding: 0 0 0.25rem;
}

.text-white .btn-underline {
	color: #fff;
	border-bottom: 1px solid #fff;
}

.btn-underline:before {
	display: none;
}



/* Stretched Link */

.btn.stretched-link {
	max-height: 0;
	opacity: 0;
	padding: 0;
	position: static;
}

.btn.stretched-link:before {
	display: none;
}


/* Dropdown Buttons */

.btn-collapse-wrapper {
	align-self: flex-start;
	z-index: 1;
}

.text-center .btn-collapse-wrapper {
	align-self: center;
}

.btn-collapse-wrapper > button {
	position: relative;
	z-index: 1;
}

.btn-collapse-wrapper > button svg  {
	height: auto;
	transition: 0.2s ease-out;
	width: 0.75rem;
}

.btn-collapse-wrapper.open > button svg  {
	transform: scaleY(-1);
}

.btn-collapse-wrapper > button.btn-primary svg path {fill: var(--button-primary-text-colour);}
.btn-collapse-wrapper > button.btn-secondary svg path {fill: var(--button-secondary-text-colour);}
.btn-collapse-wrapper > button.btn-tertiary svg path {fill: var(--button-tertiary-text-colour);}
.btn-collapse-wrapper > button.btn-quaternary svg path {fill: var(--button-quaternary-text-colour);}

.btn-collapse {
	display: flex;
	flex-direction: column;
	pointer-events: none;
	position: absolute;
	top: 100%; right: 0; left: 0;
	transition: 0.2s ease-out;
}

.btn-collapse-wrapper.open .btn-collapse {
	pointer-events: auto;
}

.btn-collapse a {	
	opacity: 0;
	margin-top: 0.5rem;
	transform: translateY(-100%);
	transition: 0.2s ease-out;
}

.btn-collapse-wrapper.open .btn-collapse a {
	opacity: 1;
	transform: translateY(0);
}

.btn-collapse-wrapper.open .btn-collapse a:nth-child(2) {transition-delay: 0.1s;}
.btn-collapse-wrapper.open .btn-collapse a:nth-child(3) {transition-delay: 0.2s;}
.btn-collapse-wrapper.open .btn-collapse a:nth-child(4) {transition-delay: 0.3s;}
.btn-collapse-wrapper.open .btn-collapse a:nth-child(5) {transition-delay: 0.4s;}
.btn-collapse-wrapper.open .btn-collapse a:nth-child(6) {transition-delay: 0.5s;}
.btn-collapse-wrapper.open .btn-collapse a:nth-child(7) {transition-delay: 0.6s;}
.btn-collapse-wrapper.open .btn-collapse a:nth-child(8) {transition-delay: 0.7s;}

.btn-collapse img {
	margin-bottom: 0.2rem;
	transform: rotate(180deg);
	transition: 0.15s;
	width: 1rem;
}

.btn-collapse.collapsed img {
	transform: rotate(0deg);
}


/* Button Media Queries */

/* 768px */
@media (max-width: 767px) { 
	.btn {font-size: var(--button-font-size-mobile);}
}