.x-button {
	height: 2.1em;
	padding: 0 8px;
	@include border-radius(6px);
	background-color: #fff;
	border-color: $ios7-blue;
}

.x-button-icon {
	width: 1.5em;
	height: 1.5em;
	color: $ios7-blue;

	&:before {
		font-size: 1.4em;
		line-height: 1.15em;
	}
}

.x-button-pressing {
	.x-button-icon {
		color: $ios7-blue-lighten;
	}
}

.x-button-label {
	font-weight: 400;
	font-family: "Helvetica Neue", Helvetica, Arial;
}

// UIs

.x-button-round,
.x-button-decline-round,
.x-button-confirm-round {
	@include border-radius(1.8em);
}

.x-button-small,
.x-button-decline-small,
.x-button-confirm-small {
	height: 1.4em;
	padding: 0 5px;

	.x-button-label {
		font-size: 1em;
	}
}

.x-button,
.x-button-round,
.x-button-small,
.x-button-forward {
	border-color: $ios7-blue;

	.x-button-label {
		color: $ios7-blue;
	}

	&.x-button-pressing,
	&.x-button-pressed {
		border-color: $ios7-blue-lighten;

		.x-button-label {
			color: $ios7-blue-lighten;
		}
	}
}

.x-button-decline,
.x-button-decline-round,
.x-button-decline-small {
	border-color: $ios7-red;

	.x-button-label {
		color: $ios7-red;
	}

	&.x-button-pressing,
	&.x-button-pressed {
		border-color: $ios7-red-lighten;

		.x-button-label {
			color: $ios7-red-lighten;
		}
	}
}

.x-button-confirm,
.x-button-confirm-round,
.x-button-confirm-small {
	border-color: $ios7-green;

	.x-button-label {
		color: $ios7-green;
	}

	&.x-button-pressing,
	&.x-button-pressed {
		border-color: $ios7-green-lighten;

		.x-button-label {
			color: $ios7-green-lighten;
		}
	}
}

.x-button {
	&.x-button-action,
	&.x-button-action-round,
	&.x-button-action-small {
		border-color: $ios7-blue;

		.x-button-label {
			color: $ios7-blue;
		}

		&.x-button-pressing {
			border-color: $ios7-blue-lighten;

			.x-button-label {
				color: $ios7-blue-lighten;
			}
		}
	}
}

.x-button.x-button-back {
	border: 0px;
	color: $ios7-blue;
	background-color: transparent;
	margin: 0px;
	padding: 0px;

	&:before {
		content: '"';
		font-family: 'iOS7';
		color: $ios7-blue;
		font-size: 1.3em;
		text-align: center;
		background-color: transparent;
		line-height: 1.3em;
		padding-left: 0px;
	}

	.x-button-label {
		font-size: 1.1em;
		line-height: 1.3em;
		font-weight: 300;
		padding-left: 2px;
	}

	&.x-button-pressing {
		color: $ios7-blue-lighten;

		&:before {
			color: $ios7-blue-lighten;
		}

		.x-button-label {
			color: $ios7-blue-lighten;
		}
	}
}

// Badges

.x-hasbadge {
	overflow: visible;

	.x-badge {
		top: -5px;
		right: -6px;
		max-width: 55%;

		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		display: block;
		overflow: hidden;

		color: #fff !important;
		min-width: 18px;
		font-weight: bold;
		text-shadow: 0 0 0 !important;
		font-family: "Helvetica Neue", Helvetica, Arial;
		font-size: 10px !important;
		padding: 1px 2px 2px;
		border: 0px;
		@include border-radius($list-disclosure-size);
		background-color: $ios7-red;
	}
}