/**
 * Button Styles
 * Baseline Style System
 *
 * Standardized button components with variants
 * Import this after variables.css and global.css
 */

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.btn,
.button1 {
	/* Reset default styling */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	outline: none;

	/* Base styles */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--button-height);
	min-width: var(--button-min-width);
	padding: 0 var(--button-padding-x);
	margin: 0 var(--space-1) 0 var(--space-1);

	/* Typography */
	font-family: var(--font-primary);
	font-size: var(--font-size-md) !important;
	font-weight: var(--font-weight-normal);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	/* Colors */
	background: #dddddd;
	color: #444444;

	/* Effects */
	border-radius: var(--radius-md);
	cursor: pointer;
	user-select: none;
	transition: all var(--transition-fast);

	/* Text shadow for depth */
	text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15);

	/* Bevel effect */
	box-shadow:
		0 0 0 1px #999999 inset,
		0 0 0 2px #ffffff inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.65) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn:hover,
.button1:hover {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px #999999 inset,
		0 0 0 2px #ffffff inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.75) inset,
		1px 2px 4px rgba(0, 0, 0, 0.3);
}

.btn:active,
.button1:active {
	transform: translateY(0);
	box-shadow:
		0 0 0 1px #999999 inset,
		0 0 0 2px #ffffff inset,
		0 20px 15px -18px rgba(255, 255, 255, 0.55) inset,
		1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================
   BUTTON SIZES
   ======================================== */

.btn-sm,
.button3 {
	height: var(--button-height-sm);
	min-width: 40px;
	padding: var(--space-1) var(--button-padding-x-sm);
	font-size: 9px;
	border-radius: var(--radius-base);

	box-shadow:
		0 0 0 1px #999999 inset,
		0 0 0 2px #ffffff inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.65) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-lg {
	height: var(--button-height-lg);
	min-width: 100px;
	padding: 0 30px;
	font-size: var(--font-size-lg) !important;
}

/* ========================================
   BUTTON VARIANTS - PRIMARY COLORS
   ======================================== */

.btn-blue,
.button1.blue,
.button3.blue {
	background: #0040a0;
	color: var(--color-white);
	box-shadow:
		0 0 0 2px #0017a5 inset,
		0 0 0 1px #0017a5 inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.55) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-green,
.button1.green,
.button3.green {
	background: #669933;
	color: var(--color-white);
	box-shadow:
		0 0 0 1px #669966 inset,
		0 0 0 2px #669966 inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.55) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-orange,
.button1.orange,
.button3.orange {
	background: #dd7700;
	color: var(--color-white);
	box-shadow:
		0 0 0 2px #dd7700 inset,
		0 0 0 1px #ffcc66 inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.55) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-red,
.button1.red,
.button3.red {
	background: #dd0000;
	color: var(--color-white);
	box-shadow:
		0 0 0 1px #ff0000 inset,
		0 0 0 2px #ff6666 inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.55) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========================================
   BUTTON STATES
   ======================================== */

.btn-disabled,
.btn:disabled,
.button1.disabled,
.button1:disabled {
	cursor: default;
	background: #dfdeda;
	color: #555555;
	opacity: 0.6;
	box-shadow:
		0 0 0 2px #aaaaaa inset,
		0 0 0 1px #aaaaaa inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.55) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

.btn-disabled.dark,
.button1.disabled2 {
	background: #595959;
	color: #aaaaaa;
	box-shadow:
		0 0 0 2px #595959 inset,
		0 0 0 1px #595959 inset,
		0 30px 20px -18px rgba(255, 255, 255, 0.20) inset,
		1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========================================
   MODERN BUTTON VARIANTS (FLAT STYLE)
   ======================================== */

.btn-modern {
	box-shadow: none;
	text-shadow: none;
	border-radius: var(--radius-base);
	font-weight: var(--font-weight-medium);
}

.btn-modern:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.btn-modern:active {
	box-shadow: var(--shadow-sm);
	transform: translateY(0);
}

.btn-modern.blue {
	background: var(--color-blue-accent);
	color: var(--color-white);
}

.btn-modern.green {
	background: var(--color-green-active);
	color: var(--color-white);
}

.btn-modern.red {
	background: var(--color-red-active);
	color: var(--color-white);
}

.btn-modern.orange {
	background: var(--color-orange-accent);
	color: var(--color-white);
}

.btn-modern.gray {
	background: var(--color-gray-light);
	color: var(--color-text-primary);
}

/* ========================================
   ICON BUTTONS
   ======================================== */

.btn-icon {
	min-width: var(--button-height);
	width: var(--button-height);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-icon.sm {
	min-width: var(--button-height-sm);
	width: var(--button-height-sm);
	height: var(--button-height-sm);
}

.btn-icon.lg {
	min-width: var(--button-height-lg);
	width: var(--button-height-lg);
	height: var(--button-height-lg);
}

/* ========================================
   BUTTON GROUPS
   ======================================== */

.btn-group {
	display: inline-flex;
	gap: 0;
}

.btn-group .btn,
.btn-group .button1 {
	margin: 0;
	border-radius: 0;
}

.btn-group .btn:first-child,
.btn-group .button1:first-child {
	border-top-left-radius: var(--radius-md);
	border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child,
.btn-group .button1:last-child {
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}

/* ========================================
   SPECIAL BUTTON STYLES
   ======================================== */

/* Transport Buttons (for media players) */
.transport-button {
	width: 62px;
	height: 62px;
	border: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	cursor: pointer;
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

.transport-button:disabled {
	filter: grayscale(70%) brightness(0.75);
	cursor: default;
}

.transport-button:not(:disabled):hover {
	transform: translateY(-2px);
}

.transport-button.play {
	background-image: url('/images/modules/mediaplayer/button_play_off_65.png');
}

.transport-button.play.is-active {
	background-image: url('/images/modules/mediaplayer/button_play_on_65.png');
}

.transport-button.pause {
	background-image: url('/images/modules/mediaplayer/button_pause_off_65.png');
}

.transport-button.pause.is-active {
	background-image: url('/images/modules/mediaplayer/button_pause_on_65.png');
}

.transport-button.stop {
	background-image: url('/images/modules/mediaplayer/button_stop_off_65.png');
}

.transport-button.stop.is-active {
	background-image: url('/images/modules/mediaplayer/button_stop_on_65.png');
}

.transport-button.previous {
	background-image: url('/images/modules/mediaplayer/button_previous_off_65.png');
}

.transport-button.previous.is-active {
	background-image: url('/images/modules/mediaplayer/button_previous_on_65.png');
}

.transport-button.next {
	background-image: url('/images/modules/mediaplayer/button_next_off_65.png');
}

.transport-button.next.is-active {
	background-image: url('/images/modules/mediaplayer/button_next_on_65.png');
}