/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: buttons-animations.css
 * Description: Button Motion and Interaction States
 *
 * Depends:
 * tokens.css
 * motion.css
 * buttons.css
 * buttons-theme.css
 *
 * Version:
 * 2.0.1
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   BASE MOTION
========================================================== */

.gm-btn{

	transition:
		background-color
		var(--gm-motion-fast)
		var(--gm-motion-smooth),

		border-color
		var(--gm-motion-fast)
		var(--gm-motion-smooth),

		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth),

		transform
		var(--gm-motion-fast)
		var(--gm-motion-smooth),

		box-shadow
		var(--gm-motion-normal)
		var(--gm-motion-smooth),

		opacity
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}


/* ==========================================================
   HOVER
========================================================== */

.gm-btn:hover{

	transform:translateY(-2px);

	box-shadow:
		0 8px 20px rgba(0,0,0,.08),
		0 2px 8px rgba(0,0,0,.05);

}


/* ==========================================================
   ACTIVE / PRESS
========================================================== */

.gm-btn:active{

	transform:
		translateY(0)
		scale(.985);

}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.gm-btn:focus{

	outline:none;

}

.gm-btn:focus-visible{

	outline:var(--gm-focus-ring);

	outline-offset:var(--gm-focus-ring-offset);

}


/* ==========================================================
   DISABLED
========================================================== */

.gm-btn:disabled,
.gm-btn.is-disabled,
.gm-btn[aria-disabled="true"]{

	transform:none;

	box-shadow:none;

	pointer-events:none;

}


/* ==========================================================
   LOADING
========================================================== */

.gm-btn.is-loading{

	cursor:wait;

	opacity:.78;

	transform:none;

}


/* ==========================================================
   LOADING SPINNER
   Referenced by buttons.css
========================================================== */

@keyframes gm-button-spin{

	to{

		transform:rotate(360deg);

	}

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

	.gm-btn{

		transition:none;

	}

	.gm-btn:hover,
	.gm-btn:active{

		transform:none;

	}

	.gm-btn.is-loading::after{

		animation:none;

	}

}