/* ==========================================================================
   Buttons
   ========================================================================== */
:root {
	--btn-family: var(--font-title);
	
	--btn-color: var(--white-1);
	--btn-color_hover: var(--white-1);
	
	--btn-background: var(--color-1);
	--btn-background_hover: var(--color-1_hover);
	
	--btn-border: .1rem solid rgba(0,0,0,.08);  
	
	--btn-weight: 500;
	--btn-size: 1.8rem;
	--btn-lh: 1.4;
	--btn-padding: .6rem .6rem .6rem 3.2rem;
	--btn-radius: 999px;
	--btn-transition: all .3s ease;
}

.button {
	appearance: none; 
	-webkit-appearance: none;
	margin: 0;
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	
	color: var(--btn-color);
	background-color: var(--btn-background);
	border: var(--btn-border);
	border-radius: var(--btn-radius);
	padding: var(--btn-padding);

	font-family: var(--btn-family);
	font-weight: var(--btn-weight);
	font-size: var(--btn-size);
	line-height: var(--btn-lh);

	transition: var(--btn-transition);
}

.button:hover {
	color: var(--btn-color_hover);
	background-color: var(--btn-background_hover);
}

.button:active {
	transform: scale(0.97);
}

.button span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.8rem;
	width: 4.8rem;
	border-radius: 50%;
	background-color: var(--white-1);
	flex-shrink: 0;
	margin-left: 2.4rem;
	overflow: hidden; 
}

.button span svg {
	height: 2.2rem;
	fill: transparent;
	transition: .3s ease;
}

.button.phone span svg {
	height: 2rem;
}

.button span svg path {
	stroke: var(--color-1);
}

.button:not(.phone):hover span svg {
	animation: arrowFly 0.5s ease-in-out forwards;
}

/* ==========================================================================
   Button 2
   ========================================================================== */
.button.button-2 {
	color: var(--white-1);
	background-color: rgba( 255, 255, 255, .24 );
	border: 1px solid rgba( 255, 255, 255, .24 );
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.button.button-2:hover {
	color: var(--color-1_hover);
}


/* ==========================================================================
   Animacje
   ========================================================================== */

@keyframes arrowFly {
	0% { 
		transform: translateX(0); 
	}
	49.99% { 
		transform: translateX(200%);
	}
	50% { 
		transform: translateX(-200%);
	}
	100% { 
		transform: translateX(0);
	}
}