.ui.button {
    cursor: pointer;
    display: inline-block;
    border: none;
    font-size: 1rem;
    background: #f7f8fa linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset;
    color: #111111;
    padding: 0.5rem 1rem 0.5rem;
    text-align: center;
    border-radius: 3px;
    user-select: none;
    text-decoration: none;
    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease;
    -webkit-tap-highlight-color: transparent;

	&:hover {
		background-color: #e0e0e0;
		background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
		box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset;
		color: rgba(0, 0, 0, 0.8);
	}

	&.badge {
		font-size: 10px;
		padding: 0.1rem 0.25rem;
	}

	&.primary {
		background-color: #f4cc67;
		background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
		box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
		color: #111111;
		border: 1px solid;
		border-color: #C59F43 #AA8326 #957321;

		&:hover {
			background-color: #fac847;
			border-color: #C59F43 #AA8326 #957321;
		}
	}

	&.secondary {
		background-color: #444c55;
		color: #ffffff;
		background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
		border: 1px solid;
		border-color: #3D444C #2F353B #2C3137;
		box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;

		&:hover {
			background-color: #4e5964;
			border-color: #32373E #24282D #212429;
		}
	}

	&.danger {
		background-color: #e57373;
		background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1));
		box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
		border: 1px solid;
		border-color: #d32f2f #c62828 #b71c1c;

		&:hover {
			background-color: #d95c5c;
			border-color: #b71c1c #a52727 #8e1f1f;
		}
	}
}