:root {
	--color-dark: #676A6C;

	--color-primal-blue: #008CFF;
	--color-primal-blue-1: #E6F4FF;
	--color-primal-blue-2: #0069BF;
	--color-primal-blue-3: #004680;

	--color-light: #FFFFFF;
	--color-light-1: #F2F5F7;
	--color-light-2: #DFE6EC;
	--color-light-3: #AFC1CF;

	--color-warning: #f8ac59;
	--color-warning-1: #BF7F00;
	--color-warning-2: #FFAA00;
	--color-warning-3: #FFF6E5;

	--color-danger: #800015;
	--color-danger-1: #BF0020;
	--color-danger-2: #FF002A;
	--color-danger-3: #FFE5EA;

	--color-success: #00800B;
	--color-success-1: #40BF4A;
	--color-success-2: #EDF9EC;

	--color-confirmation: #21BFC1;
}

.ds-button {
	outline: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.ds-button svg {
	width: 16px;
	height: 16px;
	margin: 0 4px;
}

.ds-button .caret {
	margin-left: 8px;
}

.ds-button--primary {
	border: 0;
	color: var(--color-light);
	border: 1px solid var(--color-primal-blue);
	background-color: var(--color-primal-blue);
}

.ds-button--secondary {
	color: #676A6C;
	background-color: white;
	border: 1px solid #D7DFE2;
}

.ds-button--danger {
	border: 0;
	color: var(--color-light);
	background-color: var(--color-danger-1);
}

.btn-group.open .ds-button {
	box-shadow: none;
}

.btn-group.open .ds-button--secondary {
	border: 1px solid var(--color-primal-blue-2);
	background-color: var(--color-primal-blue-1);
}

.ds-button--terciary {
	color: #004680;
	border: 1px solid #004680;
	background-color: white;
}

.ds-button--primary:hover {
	background-color: #2C70C5;
	color: #fff;
}

.ds-button--secondary:hover {
	box-shadow: 0 0px 0px 1px var(--color-primal-blue);
}

.ds-button--terciary:hover {
	color: #0069BF;
	border: 1px solid #0069BF;
}

.ds-button--primary:active {
	background-color: #1F5494;
}

.ds-button--secondary:active {
	border: 1px solid #A7B1C2;
	background-color: #E7EAEC;
}

.ds-button--icon {
	padding: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ds-button--icon--24 {
	width: 24px;
	height: 24px;
}

.ds-button--primary:disabled,
.ds-button--secondary:disabled {
	color: #fff;
	border: 1px solid #E7EAEC;
	background-color: #E7EAEC;
	box-shadow: none;
}

.ds-button--primary:disabled svg,
.ds-button--secondary:disabled svg {
	fill: #A7B1C2;
}

.ds-button--primary svg,
.ds-button--danger svg {
	fill: white;
}

.ds-button--secondary svg {
	fill: #676A6C;
}

.ds-button--tertiary {
	border: 0;
	text-decoration: underline;
	background-color: transparent;
}

/* Button Group */
.ds-button-group {
	display: flex;
}

.ds-button-group button {
	outline: none;
	border: 1px solid #D1DADE;
	border-right: none;
	padding: 6px 12px;
	background-color: white;
}

.ds-button-group button:first-child {
	border-radius: 4px 0px 0px 4px;
}

.ds-button-group button:last-child {
	border-right: 1px solid #E7EAEC;
	border-radius: 0px 4px 4px 0px;
}

.ds-button-group button:only-child {
	border-radius: 4px !important;
}

.ds-button-group--active {
	background-color: #E7EAEC !important;
}

.ds-button-group--active-secondary {
	border: 1px solid var(--color-primal-blue-2)!important;
	background-color: var(--color-primal-blue-1)!important;
}

.ds-button--active.ds-button--secondary {
	background-color: #DFE6EC;
	border: 1px solid #D9E2E6
}

.ds-button--bold {
	font-weight: 700;
}

.ds-button--icon span {
	display: inline-block;
	margin-top: 1px;
}

.ds-button--icon svg {
	margin-right: 5px;
}


/* Buttons colors */

.ds-button--success {
	color: var(--color-light);
	background-color: var(--color-success);
}

.ds-button--success svg {
	fill: var(--color-light);
}

.ds-button--light-3 {
	color: var(--color-light);
	background-color: var(--color-light-3);
}

.ds-button--light-3 svg {
	fill: var(--color-light);
}

.ds-button--success-1 {
	color: var(--color-light);
	background-color: var(--color-success-1);
}

.ds-button--success-1 svg {
	fill: var(--color-light);
}

.ds-button--warning {
	color: var(--color-light);
	background-color: var(--color-warning);
}

.ds-button--warning svg {
	fill: var(--color-light);
}

.ds-button--dark {
	color: var(--color-light);
	background-color: var(--color-dark);
}

.ds-button--dark svg {
	fill: var(--color-light);
}

.ds-button--tiny {
	padding: 4px;
	display: flex;
	outline: 0;
	border: 0;
	border-radius: 3px;
	align-items: center;
	justify-content: center;
}

.ds-button--confirmation {
	color: var(--color-light);
	background-color: var(--color-confirmation);
}

.ds-button--confirmation svg {
	fill: var(--color-light);
}


/* Icon buttons */


.ds-button-icon {
	padding: 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ds-button-icon span {
	margin-left: 8px;
}

/* Action buttons */

.ds-button--action {
	padding: 4px;
}

.ds-button--action svg {
	margin: 0;
}


/* HELPERS */

.btn {
	display: inline-flex;
	align-items: center;
}

.btn .fa-filter,
.ds-button .fa-filter {
	margin-right: 8px;
}