button {
	border-radius: 3px;
	font-family: OpenSans;
	font-weight: 600;
	padding: 0.5em 1em;
	background-color: transparent;
	border: 0 solid transparent;
	color: var(--font-color);
	font-size: 0.9rem;
	transition: all 0.2s ease-in;
	cursor: pointer;
}

.button-container-secondary,
.button-container-tile,
.button-container-primary,
.button-container-icon,
.button-container-hollow,
.button-container-danger,
.button-container-ghost,
.button-container-danger-ghost {
	display: inline-block;
}

.button-icon-after,
.button-icon-before {
	margin: 0 0.46rem;
}

.button-icon-after {
	margin-right: 0;
}

.button-icon-before {
	margin-left: 0;
}

.button-container-icon button {
	font-size: 1.1rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.button-container-icon .finsemble-icon-trash {
	color: var(--core-primary-5);
}

.button-container-icon:hover .finsemble-icon-trash {
	color: var(--accent-negative);
}

.button-container-icon .finsemble-icon-life-ring {
	color: var(--core-primary-5);
}

.button-container-icon:hover .finsemble-icon-life-ring {
	color: inherit;
}

.button-container-icon .finsemble-icon-copy {
	color: var(--core-primary-5);
}

.button-container-icon:hover .finsemble-icon-copy {
	color: inherit;
}

.button-container-icon span.finsemble-icon {
	cursor: pointer;
}

.button-container-icon span.btn-label {
	padding-left: 5px;
}

/* Primary */

.button-container-primary button {
	border-radius: 2em;
	background-color: var(--core-primary-1);
	padding: 1.2em 1.1em 1.2em 1em;
	display: flex;
	height: 1em;
	font-size: 12px;
	justify-content: space-around;
	align-items: center;
	z-index: 100;
	transition: all 0.2s ease-in;
}

.button-container-primary button:hover {
	background-color: var(--core-primary-3);
}

.button-container-secondary button[disabled],
.button-container-primary button[disabled],
.button-container-secondary button[disabled]:hover,
.button-container-primary button[disabled]:hover {
	cursor: default;
	background-color: var(--core-primary-4);
}

/* Secondary */

.button-container-secondary button {
	color: var(--font-color-2);
	background-color: var(--accent-primary);
}

.button-container-secondary button:hover {
	background-color: var(--accent-primary-1);
}

/* Tile */

.button-container-tile button {
	width: 13.6em;
	height: 8.5em;
	flex-grow: 0;
	flex-shrink: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 0.5em;
	margin: 0.5em;
	background-color: var(--core-primary-1);
	border-radius: 0.5em;
	font-size: 1.1em;
	transition: all 0.25s;
	border: 2px solid transparent;
	max-width: 30em;
	display: flex;
}

.button-container-tile button:hover {
	border-color: var(--accent-primary-1);
}

.button-container-tile div {
	margin-top: 0.5em;
}

.button-container-tile-icon {
	font-size: 2.5em;
}

/* Hollow */

.button-container-hollow button {
	background-color: transparent;
	color: var(--font-color);
	border-radius: 5px;
	border: solid 2px var(--accent-primary);
	padding-top: calc(0.5em - 1px);
	padding-bottom: calc(0.5em - 1px);
}

.button-container-hollow button:hover {
	background-color: var(--accent-primary-1);
}

.button-container-hollow button[disabled],
.button-container-hollow button[disabled]:hover {
	cursor: default;
	background-color: transparent;
	border-color: var(--core-primary-4);
}

/* Danger */

.button-container-danger button {
	background-color: transparent;
	color: var(--accent-negative);
	border-radius: 5px;
	border: solid 1px var(--accent-negative);
}

.button-container-danger button:hover {
	background-color: var(--accent-negative-1);
}

/* Ghost */

.button-container-ghost button:hover,
.button-container-danger-ghost button:hover {
	text-decoration: underline;
}

/* Danger Ghost */

.button-container-danger-ghost button {
	color: var(--accent-negative);
}

.back-button svg {
	margin-left: 0.3em;
	width: 16px;
	height: 16px;
}

.back-button button {
	width: 2.5em;
}

.back-button {
	margin-left: -1.7rem;
}
