/* ------------------------------ MAIN BUTTON STYLES ------------------------------ */

button, [class^="button-"], [class^="button-"]:visited {

	--button-color-darkest:   rgb(30, 30, 30);
	--button-color-dark:      rgb(80, 80, 80);
	--button-color-base:      rgb(128, 128, 128);
	--button-color-bright:    rgb(148, 148, 148);
	--button-color-brightest: rgb(220, 220, 220);

	--button-color-text:      white;
	--button-color-border:    var(--button-color-dark);

	display: inline-flex;
	align-items: center;
	gap: 0.25em;

	/* line-height: 1.3em; */
	line-height: 20px;
	word-break: normal;

	position: relative;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	padding: 4px 8px;
	box-sizing: border-box;

	border: 1px solid var(--button-color-border);
	border-radius: 4px;

	color: var(--button-color-text) !important;
	text-align: center;
	font-size: 15px;

	background-color: var(--button-color-base);
	box-shadow: 0 4px var(--button-color-border);

	text-decoration: none;
	text-shadow: 0 0 2px var(--button-color-dark), 0 0 2px var(--button-color-dark);

	margin-bottom: 4px;

	transition: box-shadow 0.05s ease-out, transform 0.05s ease-out;

	/*cursor: url(../img/cursors/Demirramon_link.png), auto;*/
	cursor: pointer;

}
@media (prefers-reduced-motion: reduce) {
	button, [class^="button-"], [class^="button-"]:visited {
		transition: none;
	}
}

button:hover, [class^="button-"]:hover, [class^="button-"]:focus {
	background-color: var(--button-color-bright);
	color: white;
	text-decoration: none;
	outline: none;
}

button:active, [class^="button-"]:active, [class^="button-"].selected,
button:disabled, [class^="button-"]:disabled, .button-disabled {
	transform: translateY(4px);
	box-shadow: 0 0 var(--button-color-border);
}

.button-buried:active, .button-buried.selected,
.button-buried:disabled, .button-buried.button-disabled {
	box-shadow: 0 -4px var(--button-color-border);
}

button:disabled, [class^="button-"]:disabled, .button-disabled {
	--button-color-text: rgb(220, 220, 220);
	cursor: not-allowed;
}


/* ------------------------------ BUTTON COLORS ------------------------------ */
/* ---- Dynamic color buttons (blue = theme color) ---- */

.button-blue:not(:disabled), .button-blue:visited:not(:disabled) {
	--button-color-darkest:   var(--color-darkest);
	--button-color-dark:      var(--color-dark);
	--button-color-base:      var(--color-base);
	--button-color-bright:    var(--color-bright);
	--button-color-brightest: var(--color-brightest);
}

/* ---- White buttons ---- */

:root {
	--white-brightest: rgb(255, 255, 255);
	--white-brighter:  rgb(240, 240, 240);
	--white-bright:    rgb(220, 220, 220);
	--white-base:      rgb(200, 200, 200);
	--white-dark:      rgb(160, 160, 160);
	--white-darker:    rgb(100, 100, 100);
	--white-darkest:   rgb(50,  50,  50 );
}

.button-white:not(:disabled), .button-white:visited:not(:disabled) {
	--button-color-darkest:   var(--white-darkest);
	--button-color-dark:      var(--white-dark);
	--button-color-base:      var(--white-base);
	--button-color-bright:    var(--white-bright);
	--button-color-brightest: var(--white-brightest);
}

/* ---- Red buttons ---- */

:root {
	--red-brightest: rgb(255, 199, 199);
	--red-brighter:  rgb(255, 77, 77);
	--red-bright:    rgb(255, 0, 0);
	--red-base:      rgb(220, 0, 0);
	--red-dark:      rgb(150, 0, 0);
	--red-darker:    rgb(110, 0, 0);
	--red-darkest:   rgb(51, 0, 0);
}

.button-red:not(:disabled), .button-red:visited:not(:disabled) {
	--button-color-darkest:   var(--red-darkest);
	--button-color-dark:      var(--red-dark);
	--button-color-base:      var(--red-base);
	--button-color-bright:    var(--red-bright);
	--button-color-brightest: var(--red-brightest);
}

/* ---- Green buttons ---- */

:root {
	--green-brightest: rgb(178, 241, 178);
	--green-brighter:  rgb(85, 209, 85);
	--green-bright:    rgb(28, 194, 28);
	--green-base:      rgb(0, 153, 0);
	--green-dark:      rgb(0, 120, 0);
	--green-darker:    rgb(0, 70, 0);
	--green-darkest:   rgb(0, 25, 0);
}

.button-green:not(:disabled), .button-green:visited:not(:disabled) {
	--button-color-darkest:   var(--green-darkest);
	--button-color-dark:      var(--green-dark);
	--button-color-base:      var(--green-base);
	--button-color-bright:    var(--green-bright);
	--button-color-brightest: var(--green-brightest);
}

/* ---- Yellow buttons ---- */

:root {
	--yellow-brightest: rgb(255, 248, 211);
	--yellow-brighter:  hsl(51, 93%, 60%);
	--yellow-bright:    hsl(51, 93%, 45%);
	--yellow-base:      hsl(51, 93%, 40%);
	--yellow-dark:      rgb(124, 108, 0);
	--yellow-darker:    rgb(68, 59, 0);
	--yellow-darkest:   rgb(31, 27, 2);
}

.button-yellow:not(:disabled), .button-yellow:visited:not(:disabled) {
	--button-color-darkest:   var(--yellow-darkest);
	--button-color-dark:      var(--yellow-dark);
	--button-color-base:      var(--yellow-base);
	--button-color-bright:    var(--yellow-bright);
	--button-color-brightest: var(--yellow-brightest);
}


/* ------------------------------ INVERTED BUTTONS ------------------------------ */

.button-inverted, .button-inverted:visited {
	--button-color-border: var(--button-color-brightest);
	border-color: var(--button-color-brightest);
}


/* ------------------------------ FLAT AND ROUND BUTTONS ------------------------------ */

.button-round {
	padding: 4px;
	border-radius: 100%;
}

.button-flat,
.button-round {
	position: relative;
	box-shadow: 0 0 var(--button-color-border) !important;
	margin-bottom: 0;
}
.button-flat:active, .button-flat.selected,
.button-round:active, .button-round.selected {
	transform: scale(0.9);
}
.button-flat:active, .button-flat.selected {
	box-shadow:
		 3px  2px var(--button-color-border),
		-3px  2px var(--button-color-border),
		 3px -2px var(--button-color-border),
		-3px -2px var(--button-color-border)
		!important;
}
.button-round:active, .button-round.selected {
	box-shadow:
		 2px  2px var(--button-color-border),
		-2px  2px var(--button-color-border),
		 2px -2px var(--button-color-border),
		-2px -2px var(--button-color-border)
		!important;
}
.button-flat:disabled,
.button-round:disabled {
	transform: none;
}


/* ------------------------------ SIZE MODIFIERS ------------------------------ */

.button-narrow, .button-small {
	padding: 2px 4px !important;
}
.button-narrow.button-round, .button-small.button-round {
	padding: 2px !important;
}

.button-small {
	font-size: 9pt !important;
	line-height: 9pt !important;
}

.button-tiny {
	padding: 1px 2px !important;
	font-size: 7pt !important;
	line-height: 7pt !important;
}
.button-tiny.button-round {
	padding: 1px !important;
}


/* ------------------------------ TARGET LOSS PREVENTION ------------------------------ */
/* This will create an element that will keep the hitbox */
/* of the button the same size even when pressed down. */

button:not(.button-flat):not(.button-round)::after,
[class^="button-"]:not(.button-flat):not(.button-round)::after {

	--debug-bg: transparent;
	--debug-border: transparent;

	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 4px;
	border: var(--debug-border);
	background-color: var(--debug-bg);
	box-sizing: border-box;

}

button:not(.button-flat):not(.button-round):active::after,
[class^="button-"]:not(.button-flat):not(.button-round):active::after {

	top: -4px !important;
}


/* ------------------------------ SPACED BUTTONS ------------------------------ */

.button-spaced-v, .button-spaced,
.spaced-button-container-v button, .spaced-button-container-v [class^="button-"],
.spaced-button-container button, .spaced-button-container [class^="button-"] {
	margin-top: 2px;
	margin-bottom: 6px;
}

.button-spaced-h, .button-spaced,
.spaced-button-container-h button, .spaced-button-container-h [class^="button-"],
.spaced-button-container button, .spaced-button-container [class^="button-"] {
	margin-left: 2px;
	margin-right: 2px;
}