.x-toolbar {
  background-image: none;
  background-color: $background-color-toolbar;
  border-color: $grey;
  line-height: $font-default-line-height;
  padding: ($toolbar-height - $button-small-height)/2 $padding-medium $padding-medium;
}

.x-panel-noborder .x-panel-tbar-noborder .x-toolbar {
	border-width: 0 0 1px;
	border-color: $grey;
}
.x-panel-noborder .x-panel-tbar-noborder .x-toolbar .x-toolbar {
	border-width: 0;
}

.x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar, .k-search-toolbar-panel .x-toolbar {
	padding: ($toolbar-height - $button-small-height - 2px - 1px)/2 $padding-medium; /* we need to substract 2px extra to account for the borders around the buttons */
	border: none;
	border-bottom: 1px solid $grey;
}

/* global search input field */
.zarafa-searchfield {
	padding-top: 0px !important;
	max-width: 350px;
	border-right: 1px solid transparent;
}

/* seperator In ExtJS it's tbseperator, used in for example create new mail dialog*/
.x-toolbar .xtb-sep {
	background-image: none;
	border-left: 1px solid $seperator-color-toolbar;
}

/* exception for the (hacked) search toolbar which has a toolbar in a toobar */
.x-toolbar {
	.x-toolbar {
		padding: 0;
	}

	.x-toolbar.zarafa-paging-toolbar,
	.zarafa-loaded-mail-info {
		padding: 0 $padding-extra-extra-large;
	}
}

.x-panel-tbar .x-toolbar .x-toolbar-cell .x-form-field {
	padding: 0 $padding-medium !important;
	height: $button-small-height - 2px !important;
}

/**********************************************************
 * Toolbar buttons
 *********************************************************/
	.x-toolbar {
		.x-btn {
			.x-btn-small {
				margin-right: $padding-small;
				border-radius: 2px;
			}
		}

		.x-btn:not(.zarafa-action):not(.x-btn-noicon) {
			background-color: transparent !important;

			.x-btn-small {
				background-color: transparent;
				box-shadow: none;
				border: 1px solid transparent;
			}
		}

		.x-btn.x-btn-over:not(.zarafa-action):not(.x-btn-noicon) .x-btn-small,
		.x-btn.x-btn-pressed:not(.zarafa-action):not(.x-btn-noicon) .x-btn-small {
			border: 1px solid $grey2;
		}
		.x-btn.x-btn-over.x-btn-click:not(.zarafa-action):not(.x-btn-noicon) .x-btn-small {
			background-color: $grey3;
		}
		.x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-noicon) .x-btn-small{
			border: 1px solid $sky-blue;
		}

		/* split button */
		.x-btn .x-btn-small .x-btn-split button.x-btn-text{
			border: none;
			border-right: 1px solid $grey;
		}

		.x-toolbar-right-row td:last-child .x-btn:not(.zarafa-action) {
			.x-btn-small {
				margin-right: 0;
			}
		}

		.x-btn.zarafa-action {
			margin-right: $padding-small;
		}

		.x-item-disabled {
			opacity: 0.4;
		}

		.x-btn.zarafa-more-options-btn {
			.x-btn-split {
				padding-right: 0px;
				background-image: none !important;
			}

			.icon_more.x-btn-text {
				border-right: none !important;
			}
		}

		/* Meeting/Task request buttongroup */
		.x-btn-group.zarafa-mr-buttons, .k-tr-buttons {
			.x-btn-group-tl,
			.x-btn-group-bl {
				display: none;
			}

			.x-btn-group-mc {
				padding: 0;
			}
		}


		/**************************************
		 * Exceptions for specific buttons
		 *************************************/

		/* send button (icon has different size: 17x11px) */
		.x-btn.x-btn-text-icon {
			.x-btn-small {
				button.buttons-icon_send_white {
					padding-left: $padding-medium + 17px + $padding-medium;
					background-position: sprite-position($icons, icon_send_white, $offset-x: $padding-medium, $offset-y: $padding-medium+1px);
				}
			}
		}

		.x-btn.x-btn-icon {
			.x-btn-small {

				/* first page button */
				button.x-tbar-page-first {
					@extend .triangle_left_stop;
					background-position: sprite-position($icons, triangle_left_stop, $offset-y: 2px, $offset-x: -2px);
				}

				/* previous page button */
				button.x-tbar-page-prev {
					@extend .triangle_left;
					background-position: sprite-position($icons, triangle_left, $offset-y: 2px, $offset-x: -2px);
				}

				/* last page button */
				button.x-tbar-page-last {
					@extend .triangle_right_stop;
					background-position: sprite-position($icons, triangle_right_stop, $offset-y: 2px, $offset-x: -2px);
				}

				/* next page button */
				button.x-tbar-page-next {
					@extend .triangle_right;
					background-position: sprite-position($icons, triangle_right, $offset-y: 2px, $offset-x: -1px);
				}

				/* copy button */
				button.icon_copy {
					background-position: sprite-position($icons, icon_copy, $offset-y: 6px, $offset-x: 5px);
				}

				/* delete button */
				button.icon_delete {
					background-position: sprite-position($icons, icon_delete, $offset-y: 3px, $offset-x: 2px);
				}

				/* popout button */
				button.icon_popout {
					background-position: sprite-position($icons, icon_popout, $offset-y: 5px, $offset-x: 4px);
				}

				/* reply button */
				button.icon_replyEmail {
					@extend .icon_reply;
					background-position: sprite-position($icons, icon_reply, $offset-y: 1px, $offset-x: 1px);
				}

				/* replyAll button */
				button.icon_replyAllEmail {
					@extend .icon_reply_all;
					background-position: sprite-position($icons, icon_reply_all, $offset-y: 2px, $offset-x: 1px);
				}

				/* forward button */
				button.icon_forwardEmail {
					@extend .icon_forward;
					background-position: sprite-position($icons, icon_forward, $offset-y: 1px, $offset-x: 1px);
				}

				/* edit as new button */
				button.icon_editAsNewEmail {
					@extend .icon_edit_as_new_mail;
					background-position: sprite-position($icons, icon_edit_as_new_mail, $offset-y: 7px, $offset-x: 3);
				}

				/* save button */
				button.icon_saveEmail {
					@extend .icon_floppy;
					background-position: sprite-position($icons, icon_floppy, $offset-y: 3px, $offset-x: 2px);
				}

				/* attachment button */
				button.icon_attachment {
					@extend .icon_paperclip;
					background-position: sprite-position($icons, icon_paperclip, $offset-y: 4px, $offset-x: 1px);
				}

				/* check names button */
				button.icon_checkNames {
					@extend .icon_checknames;
					background-position: sprite-position($icons, icon_checknames, $offset-y: 2px, $offset-x: 1px);
				}

				/* signatures button */
				button.icon_addSignature {
					@extend .icon_signature;
					background-position: sprite-position($icons, icon_signature, $offset-y: 1px, $offset-x: 1px);
				}

				/* settings button */
				button.icon_openMessageOptions {
					@extend .icon_cogwheel;
					background-position: sprite-position($icons, icon_cogwheel, $offset-y: 3px, $offset-x: 2px);
				}

				/* flag button */
				button.icon_flag_red {
					background-position: sprite-position($iconsmap, icon_flag_red, $offset-y: 7px, $offset-x: 4px);
				}

				/* high priority button */
				button.icon_setHighPriority {
					@extend .icon_priority_high;
					background-position: sprite-position($icons, icon_priority_high, $offset-y: 6px, $offset-x: 9px);
				}

				/* low priority button */
				button.icon_setLowPriority {
					@extend .icon_priority_low;
					background-position: sprite-position($icons, icon_priority_low, $offset-y: 7px, $offset-x: 7px);
				}

				/* read receipt button */
				button.icon_setReadReceipt {
					@extend .icon_read_receipt;
					background-position: sprite-position($icons, icon_read_receipt, $offset-y: 5px, $offset-x: 5px);
				}

				/* show bcc button */
				button.icon_showbcc {
					background-position: sprite-position($icons, icon_showbcc, $offset-y: 4px, $offset-x: 4px);
				}

				/* show from button */
				button.icon_showfrom {
					background-position: sprite-position($icons, icon_showfrom, $offset-y: 4px, $offset-x: 4px);
				}

				/* print button */
				button.icon_print {
					background-position: sprite-position($icons, icon_print, $offset-y: 2px, $offset-x: 2px);
				}

				/* reply button */
				button.icon_print {
					background-position: sprite-position($icons, icon_print, $offset-y: 3px, $offset-x: 2px);
				}

				/* recurrence button */
				button.icon_recurrence {
					background-position: sprite-position($icons, icon_recurrence, $offset-y: 2px, $offset-x: 2px);
				}

				/* categories button */
				button.icon_categories {
					background-position: sprite-position($iconsmap, icon_categories, $offset-y: 6px, $offset-x: 5px);
				}

				/* private button */
				button.icon_private {
					background-position: sprite-position($icons, icon_private, $offset-y: 7px, $offset-x: 5px);
				}

				/* complete task button */
				button.icon_task_complete {
					background-position: sprite-position($icons, icon_task_complete, $offset-y: 4px, $offset-x: 5px);
				}

				/* complete task button */
				button.icon_send_email_to_recipient {
					@extend .icon_new_email;
					background-position: sprite-position($iconsmap, icon_new_email, $offset-y: 2px, $offset-x: 2px);
				}

				/* more button */
				button.icon_more {
					@extend .icon_more;
					background-position: sprite-position($icons, icon_more, $offset-y: 10px, $offset-x: 3px);
				}

				/* arrow left button */
				button.arrow_left_l {
					@extend .arrow_left_l;
					background-position: sprite-position($icons, arrow_left_l, $offset-y: 8px, $offset-x: 9px);
				}

				/* arrow right button */
				button.arrow_right_l {
					@extend .arrow_right_l;
					background-position: sprite-position($icons, arrow_right_l, $offset-y: 8px, $offset-x: 11px);
				}
			}
		}

		/* disabled buttons */
		.x-btn.x-btn-icon.x-item-disabled {
			.x-btn-small {
				/* first page button */
				button.x-tbar-page-first {
					@extend .triangle_left_stop_outline;
					background-position: sprite-position($icons, triangle_left_stop_outline, $offset-y: 2px, $offset-x: -2px);
				}

				/* previous page button */
				button.x-tbar-page-prev {
					@extend .triangle_left_outline;
					background-position: sprite-position($icons, triangle_left_outline, $offset-y: 2px, $offset-x: -2px);
				}

				/* last page button */
				button.x-tbar-page-last {
					@extend .triangle_right_stop_outline;
					background-position: sprite-position($icons, triangle_right_stop_outline, $offset-y: 2px, $offset-x: -2px);
				}

				/* next page button */
				button.x-tbar-page-next {
					@extend .triangle_right_outline;
					background-position: sprite-position($icons, triangle_right_outline, $offset-y: 2px, $offset-x: -1px);
				}
			}
		}

		/* small buttons with icon and text */
		.x-btn.x-btn-text-icon {
			.x-btn-small {
				/* Restored items restore item */
				button.icon_restore {
					@extend .icon_restore;
					background-position: sprite-position($iconsmap, icon_restore, $offset-y: 2px, $offset-x: 2px);
				}

				/* Restored items delete button */
				button.icon_delete {
					@extend .icon_delete;
					background-position: sprite-position($icons, icon_delete, $offset-y: 2px, $offset-x: 2px);
				}

				/* reply button */
				button.icon_replyEmail {
					@extend .icon_reply;
					background-position: sprite-position($icons, icon_reply, $offset-y: 1px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 20px;
				}

				/* replyAll button */
				button.icon_replyAllEmail {
					@extend .icon_reply_all;
					background-position: sprite-position($icons, icon_reply_all, $offset-y: 3px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 20px;
				}

				/* forward button */
				button.icon_forwardEmail {
					@extend .icon_forward;
					background-position: sprite-position($icons, icon_forward, $offset-y: 1px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 20px;
				}

				/* forward button */
				button.icon_editAsNewEmail {
					@extend .icon_edit_as_new_mail;
					background-position: sprite-position($icons, icon_edit_as_new_mail, $offset-y: 7px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 20px;
				}

				/* recurrence button */
				button.icon_recurrence {
					background-position: sprite-position($icons, icon_recurrence, $offset-y: 4px, $offset-x: $padding-medium);
				}

				/* invite button */
				button.icon_invite_attendees {
					background-position: sprite-position($icons, icon_invite_attendees, $offset-y: 4px, $offset-x: $padding-medium);
				}

				/* cancel meeting button */
				button.icon_cancel_meeting_request {
					@extend .icon_calendar_appt_cancelled;
					background-position: sprite-position($iconsmap, icon_calendar_appt_cancelled, $offset-y: 4px, $offset-x: $padding-medium);
				}

				/* No repsonse required button */
				button.icon_no_response_required {
					@extend .icon_not_current;
					background-position: sprite-position($icons, icon_not_current, $offset-y: 4px, $offset-x: $padding-medium - 1);
					padding-left: 2 * $padding-medium + 14px;
				}

				/* No repsonse required button */
				button.icon_calendar {
					@extend .icon_calendar_blue;
					background-position: sprite-position($iconsmap, icon_calendar_blue, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* Accept meeting request & Accept Proposal button */
				button.icon_calendar_appt_accept {
					@extend .icon_calendar_appt_accept;
					background-position: sprite-position($iconsmap, icon_calendar_appt_accept, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* Tentative accept meeting request button */
				button.icon_calendar_appt_tentative {
					@extend .icon_calendar_appt_tentative;
					background-position: sprite-position($iconsmap, icon_calendar_appt_tentative, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* Cancel meeting request button */
				button.icon_calendar_appt_cancelled {
					@extend .icon_calendar_appt_cancelled;
					background-position: sprite-position($iconsmap, icon_calendar_appt_cancelled, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* View in calendar button */
				button.icon_calendar_view {
					@extend .icon_calendar;
					background-position: sprite-position($iconsmap, icon_calendar, $offset-y: 5px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* Propose new time request button */
				button.icon_calendar_appt_newtime {
					@extend .icon_appt_meeting_newtime;
					background-position: sprite-position($iconsmap, icon_calendar_appt_newtime, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* View all Proposals button */
				button.icon_calendar_appt_proposals {
					@extend .icon_calendar_appt_proposals;
					background-position: sprite-position($iconsmap, icon_calendar_appt_proposals, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				/* Restore delelted items button */
				button.icon_restore {
					background-position: sprite-position($iconsmap, icon_restore, $offset-y: 4px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}

				button.buttons_icon_send_later_black {
					@extend .buttons-icon_send_white;
					background-position: sprite-position($icons, icon_send_later_black, $offset-x: $padding-medium, $offset-y: $padding-medium+1px);
				}
			}
		}

		.x-btn.x-btn-text-icon.zarafa-action {
			.x-btn-small {

				/* reply button */
				button.icon_replyEmail {
					@extend .icon_reply_white;
					background-position: sprite-position($icons, icon_reply_white, $offset-y: 6px, $offset-x: $padding-medium);
				}

				/* save button */
				button.buttons-icon_save_white {
					@extend .icon_save_white;
					background-position: sprite-position($icons, icon_save_white, $offset-y: 6px, $offset-x: $padding-medium);
				}

				/* save button */
				button.icon_calendar_appt_accept {
					@extend .icon_calendar_appt_accept_white;
					background-position: sprite-position($iconsmap, icon_calendar_appt_accept_white, $offset-y: 6px, $offset-x: $padding-medium);
				}

				/* View in calendar button */
				button.icon_calendar_view {
					@extend .icon_calendar_white;
					background-position: sprite-position($iconsmap, icon_calendar_white, $offset-y: 5px, $offset-x: $padding-medium);
					padding-left: 2 * $padding-medium + 15px;
				}
			}
		}
	}

	/* Paging toolbar */
	.x-toolbar.zarafa-paging-toolbar {
		.x-btn {
			.x-btn-small {
				background-color: transparent !important;

				button.x-btn-text {
					width: 18px;
				}
			}
		}
		.x-btn.x-btn-over.x-btn-click {
			.x-btn-small {
				button.x-btn-text {
					background-color: $grey3;
				}
			}
		}

		.x-btn-page-next {
			margin-left: $padding-small;
		}
	}
