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

.button-01,
.button-02,
.button-04 {
	display: inline-block;
	box-sizing: border-box;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid transparent;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
	font-family: Roboto-medium;
	letter-spacing: .2px;
	cursor: pointer;
	user-select: none;

	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;

	box-shadow:
		0 2px 6px rgba(0,0,0,.08),
		0 1px 2px rgba(0,0,0,.05);
}

.button-01:hover,
.button-02:hover,
.button-04:hover {
	transform: translateY(-1px);
	box-shadow:
		0 6px 16px rgba(0,0,0,.12),
		0 2px 4px rgba(0,0,0,.08);
}

.button-01:active,
.button-02:active,
.button-04:active {
	transform: translateY(0);
	box-shadow:
		0 2px 6px rgba(0,0,0,.08);
}

/* =====================================
   PRIMARY (біла)
===================================== */

.button-01 {

	background:#fff;
	color:#5f6b7a;
	border-color:#dfe3e8;

}

.button-01:hover {

	background:#f8faff;
	color:#0066ff;
	border-color:#b9d3ff;

}

/* =====================================
   DANGER (червона)
===================================== */

.button-02 {

	background:#e53935;
	color:#fff;
	border-color:#e53935;

}

.button-02:hover {

	background:#c62828;
	border-color:#c62828;
	color:#fff;

}

/* =====================================
   SECONDARY
===================================== */

.button-04 {

	background:#fff;
	color:#5f6b7a;
	border-color:#dfe3e8;

}

.button-04:hover {

	background:#eef5ff;
	color:#0066ff;
	border-color:#99c2ff;

}

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

.button-disabled {

	background:#f4f5f7 !important;
	color:#b5bcc5 !important;
	border-color:#e5e7eb !important;

	cursor:default;
	pointer-events:none;

	box-shadow:none;
	transform:none;

}