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

.button,
input[type=file]::file-selector-button {
	display: inline-block;
	user-select: none;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	padding: 5px 15px;
	font-size: 1em;
}

/* default neutral btn */
.button,
.button:focus[disabled],
.button:hover[disabled] {
	color: #000;
	background-color: #ddd;
	border: 1px solid #888;
}

.button,
.button:hover,
.button:focus {
	text-decoration: none;
}

.button:focus,
.button:hover {
	background-color: #ccc;
}

/* primary btn */
.button.primary-button,
.button.primary-button:focus[disabled],
.button.primary-button:hover[disabled] {
	color: var(--primary-btn-text-color);
	background-color: var(--primary-btn-color);
	border-color: var(--primary-btn-border-color);
}

.button.primary-button:focus,
.button.primary-button:hover {
	color: var(--primary-btn-hover-text-color);
	background-color: var(--primary-btn-hover-color);
	border-color: var(--primary-btn-border-hover-color);
}

/* input type file button */
input[type=file]::file-selector-button {
	color: var(--primary-btn-text-color);
	background-color: var(--primary-btn-color);
	border-color: var(--primary-btn-border-color);
}

input[type=file]::file-selector-button:focus,
input[type=file]::file-selector-button:hover {
	color: var(--primary-btn-hover-text-color);
	background-color: var(--primary-btn-hover-color);
	border-color: var(--primary-btn-border-hover-color);
}

	/* secondary btn */
	.button.secondary-button,
	.button.secondary-button:focus[disabled],
	.button.secondary-button:hover[disabled] {
		color: var(--secondary-btn-text-color);
		background-color: var(--secondary-btn-color);
		border-color: var(--secondary-btn-border-color);
	}

.button.secondary-button:focus,
.button.secondary-button:hover {
	color: var(--secondary-btn-hover-text-color);
	background-color: var(--secondary-btn-hover-color);
	border-color: var(--secondary-btn-border-hover-color);
}

/* neutral btn */
.button.neutral-button,
.button.neutral-button:focus[disabled],
.button.neutral-button:hover[disabled] {
	color: #fff;
	background-color: #acb1b7;
	border-color: #8c9298;
}

.button.neutral-button:focus,
.button.neutral-button:hover {
	color: #fff;
	background-color: #a1a6ad;
	border-color: #a1a6ad;
}

/* warning btn */
.button.warning-button,
.button.warning-button:focus[disabled],
.button.warning-button:hover[disabled] {
	color: #fff;
	background-color: #c33434;
	border: 1px solid #9a2323;
}

.button.warning-button:focus,
.button.warning-button:hover {
	color: #fff;
	background-color: #ad2b2b;
	border: 1px solid #9a2323;
}

.button.warning-button {
}

.button:active {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
/* customize button properties */
.button.mini-button {
	font-size: 14px;
	padding: 1px 4px;
}

.button.small-button {
	font-size: 14px;
	padding: 3px 6px;
}

.button.medium-button {
	font-size: 1em;
	padding: 5px 10px;
}

.button.large-button {
	font-size: 20px;
	padding: 6px 12px;
}

.button.full-button {
	max-width: 100%;
	width: 100%;
}

.button.stretch-button {
	max-width: none;
	width: auto;
}

[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	user-select: none;
}

/* grouped buttons */
.grouped {
	display: inline-block;
	margin-right: -5px;
	border-radius: 0;
	font-size: 1em;
	padding: 6px 16px;
	font-weight: normal;
	background-color: #ededed;
	border: 1px solid #c9c9c9;
	color: #656565;
}

.grouped:first-child {
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
}

.grouped:last-child {
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}

.grouped:focus,
.grouped:hover {
	background-color: #dedede;
	text-decoration: none;
}

.grouped:active {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.grouped:focus[disabled],
.grouped:hover[disabled] {
	background-color: #80bc00;
}