/**
 * /assets/css/button.css
 * 
 * Button styles definition.
 * 
 * This file is licensed under the MIT License.
 * See LICENSE in the project root for license information.
 * 
 * @author		Belikhun
 * @version		1.0
 * @license		MIT
 * @copyright	2018-2023 Belikhun
 */

/** Microsoft Style Button */
.ms-btn {
	position: relative;
	display: flex;
	color: white;
	background-color: transparent;
	font-size: 12px;
	font-family: var(--primary-font), sans-serif;
	font-weight: normal;
	padding: 10px 6px;
	border-width: 2px;
	border-style: solid;
	border-image: initial;
	border-color: transparent;
	text-decoration: none;
	cursor: pointer;
	transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98);
	align-items: center;
	justify-content: center;
}

.ms-btn .text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
}

.ms-btn .icon {
	margin-right: 12px;
	width: 24px;
	height: 24px;
}

.ms-btn:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.2);
}

.ms-btn:active {
	border-color: transparent;
	background-color: rgba(255, 255, 255, 0.4);
	transform: scale(0.96);
}

/** Square Button(?) */
.sq-btn {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	background-color: rgb(68, 170, 221);
	
	color: white;
	font-size: 0.75rem;
	font-family: var(--button-font), var(--primary-font), var(--secondary-font), sans-serif;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.04rem;
	text-decoration: none;

	border: unset;
	cursor: pointer;
	overflow: hidden;
	user-select: none;
	z-index: 0;

	transition:
		filter 1s cubic-bezier(0.06, 0.81, 0, 0.98),
		transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sq-btn::before,
.sq-btn::after {
	content: "";
	position: absolute;
	display: block;

	width: 0;
	height: 0;
	top: 100%;
	right: 5%;

	border-style: solid;
	border-width: 0 50px 100px;
	border-color: transparent transparent rgb(102, 204, 255);
	z-index: -1;

	will-change: transform;

	animation:
		sq-btn-trig-anim 8s linear 0s infinite;
}

.sq-btn::after {
	left: -10%;
	border-color: transparent transparent rgb(41, 154, 190);
	transform: scale(0.8);
	animation-duration: 4.5s;
	animation-delay: 0.8s;
}

.sq-btn.triBg::before,
.sq-btn.triBg::after {
	content: unset;
	display: none;
}

.sq-btn.triBg > .triangleBackground {
	z-index: -1;
}

.sq-btn > icon {
	display: flex;
	justify-content: flex-end;
	flex-grow: 1;
	flex-shrink: 0;

	margin: 0 0 0 10px;
	line-height: 20px;
}

.sq-btn > icon.left {
	justify-content: flex-start;

	margin: 0 10px 0 0;
	order: -1;
}

.sq-btn > icon::after,
body.dark .sq-btn > icon::after {
	color: white;
}

.sq-btn.empty > icon {
	margin: unset;
}

.sq-btn > .simpleSpinner {
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	--color: white;
}

.sq-btn[data-loading="true"] > .simpleSpinner {
	display: block;
}

.sq-btn[data-loading="true"] > .text,
.sq-btn[data-loading="true"] > icon {
	visibility: hidden;
}

.sq-btn[data-style="round"] {
	padding: 0.5rem 1rem;
	border-radius: 6rem;
}

.sq-btn[data-style="round"]:focus {
	outline: none;
}

.sq-btn[data-style="big"] {
	padding: 1rem;
	border-radius: 0.45rem;
}

.sq-btn[data-style="big"]:focus {
	outline: none;
}

.sq-btn[data-style="flat"] {
	padding: 14px;
	border-radius: 4px;
}

.sq-btn[data-style="flat"]::before,
.sq-btn[data-style="flat"]::after {
	content: unset;
	display: none;
}

.sq-btn[data-style="flat"] > .triangleBackground {
	display: none;
}

@keyframes sq-btn-trig-anim {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-160px);
	}
}

.sq-btn:hover {
	filter: brightness(1.2);
}

.sq-btn:active {
	transition:
		filter 1s cubic-bezier(0.06, 0.81, 0, 0.98),
		transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	
	transform: scale(0.9);
}

.sq-btn:focus {
	outline: solid rgba(36, 36, 36, 0.6) 1px;
}

body.dark .sq-btn:focus {
	outline: solid rgba(228, 228, 228, 0.6) 1px;
}

.sq-btn:disabled {
	filter: brightness(0.6);
	cursor: not-allowed;
}

.sq-btn.pink,
.sq-btn[data-color="pink"] {
	background-color: #ff66aa;
}

.sq-btn.pink::before,
.sq-btn[data-color="pink"]::before {
	border-color: transparent transparent rgb(255, 152, 204);
	animation-duration: 7.6s;
	animation-delay: -1s;
}

.sq-btn.pink::after,
.sq-btn[data-color="pink"]::after {
	border-color: transparent transparent rgb(202, 96, 146);
	animation-duration: 7.8s;
	animation-delay: +0.6s;
}

.sq-btn.green,
.sq-btn[data-color="green"] {
	background-color: #88b400;
}

.sq-btn.green::before,
.sq-btn[data-color="green"]::before {
	border-color: transparent transparent #a1d408;
	animation-duration: 8.2s;
	animation-delay: -1s;
}

.sq-btn.green::after,
.sq-btn[data-color="green"]::after {
	border-color: transparent transparent #6d8f00;
	animation-duration: 7.7s;
	animation-delay: -2.3s;
}

.sq-btn.yellow,
.sq-btn[data-color="yellow"] {
	background-color: #f6c21c;
}

.sq-btn.yellow::before,
.sq-btn[data-color="yellow"]::before {
	border-color: transparent transparent #ffd13a;
	animation-duration: 7.9s;
	animation-delay: +0.6s;
}

.sq-btn.yellow::after,
.sq-btn[data-color="yellow"]::after {
	border-color: transparent transparent #ecb913;
	animation-duration: 8.1s;
	animation-delay: -2s;
}

.sq-btn.dark,
.sq-btn[data-color="dark"] {
	background-color: #042430;
}

.sq-btn.dark::before,
.sq-btn[data-color="dark"]::before {
	border-color: transparent transparent #133947;
	animation-duration: 7.6s;
	animation-delay: +0.2s;
}

.sq-btn.dark::after,
.sq-btn[data-color="dark"]::after {
	border-color: transparent transparent #0b2e3d;
	animation-duration: 7.8s;
	animation-delay: -1.3s;
}

.sq-btn.brown,
.sq-btn[data-color="brown"] {
	background-color: #231B22;
}

.sq-btn.brown::before,
.sq-btn[data-color="brown"]::before {
	border-color: transparent transparent rgb(58, 47, 57);
	animation-duration: 8.3s;
	animation-delay: -1.6s;
}

.sq-btn.brown::after,
.sq-btn[data-color="brown"]::after {
	border-color: transparent transparent rgb(20, 16, 20);
	animation-duration: 8.1s;
	animation-delay: -0.2s;
}

.sq-btn.red,
.sq-btn[data-color="red"] {
	background-color: rgb(221, 45, 68);
}

.sq-btn.red::before,
.sq-btn[data-color="red"]::before {
	border-color: transparent transparent rgb(240, 62, 86);
	animation-duration: 8.1s;
	animation-delay: 0.3s;
}

.sq-btn.red::after,
.sq-btn[data-color="red"]::after {
	border-color: transparent transparent rgb(197, 36, 57);
	animation-duration: 7.7s;
	animation-delay: -0.3s;
}

@keyframes sq-btn-bgRainbow {
	0%      { background-color: rgb(221, 45, 68);   }
	20%     { background-color: rgb(246, 194, 28);  }
	40%     { background-color: rgb(136, 180, 0);   }
	60%     { background-color: rgb(68, 170, 221);  }
	80%     { background-color: rgb(255, 102, 170); }
	100%    { background-color: rgb(221, 45, 68);   }
}

@keyframes sq-btn-triRainbow1 {
	0%      { border-bottom-color: rgb(240, 62, 86);   }
	20%     { border-bottom-color: rgb(254, 204, 34);  }
	40%     { border-bottom-color: rgb(156, 204, 0);   }
	60%     { border-bottom-color: rgb(102, 204, 255); }
	80%     { border-bottom-color: rgb(255, 152, 204); }
	100%    { border-bottom-color: rgb(240, 62, 86);   }
}

@keyframes sq-btn-triRainbow2 {
	0%      { border-color: transparent transparent rgb(197, 36, 57);       }
	20%     { border-color: transparent transparent rgb(240, 178, 14);      }
	40%     { border-color: transparent transparent rgb(124, 162, 0);       }
	60%     { border-color: transparent transparent rgb(41, 154, 190);      }
	80%     { border-color: transparent transparent rgb(202, 96, 146);      }
	100%    { border-color: transparent transparent rgb(197, 36, 57);       }
}

.sq-btn.rainbow,
.sq-btn[data-color="rainbow"] {
	animation: sq-btn-bgRainbow 10s linear 0s infinite;
}

.sq-btn.rainbow::before,
.sq-btn[data-color="rainbow"]::before {
	animation:
		sq-btn-trig-anim 8.2s linear 0s infinite,
		sq-btn-triRainbow1 10s linear 0s infinite;
}

.sq-btn.rainbow::after,
.sq-btn[data-color="rainbow"]::after {
	animation:
		sq-btn-trig-anim 7.6s linear 0s infinite,
		sq-btn-triRainbow2 10s linear 0s infinite;
}

/** Simple Text Button */

.text-btn {
	position: relative;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	--color: black;

	padding: 18px 0;
	box-sizing: border-box;
	background-color: transparent;
	border: unset;

	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.6px;
	text-decoration: none;
	color: var(--color);

	cursor: pointer;
	user-select: none;
}

.text-btn::before {
	content: "";
	position: absolute;
	display: block;

	top: 0;
	left: -10px;
	width: calc(100% + 20px);
	height: 100%;
	border-radius: 8px;

	opacity: 0;
	transition: opacity 150ms linear;
	background-color: var(--color);
}

.text-btn:hover {
	text-decoration: none;
}

.text-btn:hover::before {
	opacity: 0.05;
}

.text-btn:active::before {
	opacity: 0.12;
}