.x-button {
	height: 2.1em;
	padding: 0 8px;
	@include border-radius(6px);
}

.x-button-icon {
    width: 1.5em;
    height: 1.5em;

    &:before {
    	color: #454547;
    	text-shadow: 0 1px 0 rgba(255,255,255,.4);
        font-size: 1.4em;
        line-height: 1.15em;
    }
}

.x-button-label {
	color: #fff;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial;
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}

// 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: 12px;
	}
}

.x-button-normal,
.x-button-round,
.x-button-small,
.x-button-back,
.x-button-forward {
	border-color: #aaa;
	@include box-shadow(inset 0 1px 0 #fafbfc);
    @include background-image(linear-gradient(bottom, #c0c1c4 0, #c0c1c4 50%, #d0d1d3 51%, #ebebec 100%));

    .x-button-label {
        color: #000;
        text-shadow: 0 1px 0 rgba(255,255,255,.3);
    }

    &.x-button-pressing,
    &.x-button-pressed {
        @include box-shadow(inset 0 1px 0 #fafbfc, inset 0 0 0 3em rgba(#000, .04));
    }
}

.x-button-decline,
.x-button-decline-round,
.x-button-decline-small {
    border-color: #882324;
    @include box-shadow(inset 0 1px 0 rgba(0,0,0,.1));
    @include background-image(linear-gradient(bottom, #cf2b2d 0, #cf2b2d 50%, #d64a4e 51%, #f6989c 100%));

    &.x-button-pressing,
    &.x-button-pressed {
        @include box-shadow(inset 0 1px 0 rgba(0,0,0,.1), inset 0 0 0 3em rgba(#000, .08));
    }
}

.x-button-confirm,
.x-button-confirm-round,
.x-button-confirm-small {
	border-color: #38802d;
	@include box-shadow(inset 0 1px 0 rgba(0,0,0,.1));
	@include background-image(linear-gradient(bottom, #56b148 0, #56b148 50%, #69c55a 51%, #99e48d 100%));

    &.x-button-pressing,
    &.x-button-pressed {
        @include box-shadow(inset 0 1px 0 rgba(0,0,0,.1), inset 0 0 0 3em rgba(#000, .08));
    }
}

.x-button {
	&.x-button-action,
	&.x-button-action-round,
	&.x-button-action-small {
		border-color: #2a48ab;
		@include box-shadow(inset 0 1px 0 rgba(0,0,0,.1));
		@include background-image(linear-gradient(top, #95b6ee, #2966dc));

        &.x-button-pressing {
            @include background-image(linear-gradient(top, #93a6c8, #26579b));
        }
	}
}

// Icons

@if $include-default-icons {
    @include icon('calendar');
    @include icon('action');
    @include icon('add');
    @include icon('arrow_down');
    @include icon('arrow_left');
    @include icon('arrow_right');
    @include icon('arrow_up');
    @include icon('compose');
    @include icon('delete');
    @include icon('organize');
    @include icon('refresh');
    @include icon('reply');
    @include icon('search');
    @include icon('settings');
    @include icon('star');
    @include icon('trash');
    @include icon('maps');
    @include icon('locate');
    @include icon('home');
    @include icon('bookmarks');
    @include icon('download');
    @include icon('favorites');
    @include icon('info');
    @include icon('more');
    @include icon('time');
    @include icon('user');
    @include icon('team');
}

// 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;
        padding: 1px 2px 2px;
        border: 2px solid #fff;
        @include border-radius($list-disclosure-size);
        @include background-image(linear-gradient(top, #f1a0a6, #c61019));
        @include box-shadow(0 1px 4px rgba(0,0,0,.3));
    }
}