/* TODO: move colors to base/_color.scss for easy maintenance/theming */

/* Action buttons: 'send' and 'save' */
$action-bgcolor					: $green;
$action-bgcolor-hover			: $green-hover;
$action-fontcolor				: $font-color-light;

/* Normal standard button */
$normal-button-bgcolor			: $grey;
$normal-button-bgcolor-hover	: $grey2;

/* Mixin for special button, usually with a different background and font color */
@mixin action-button() {
	background-color: $action-bgcolor;
	color: $action-fontcolor;
	min-width: 84px;
	height: 24px; /* Overriden from style.css */
	font-size: 13px;
}

@mixin action-button-hover() {
	background-color: $action-bgcolor-hover;
}

@mixin action-button-active() {
	background-color: $action-bgcolor;
	box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
}

/**************************************
 * General buttons
 *************************************/
	/* fix for stupid firefox padding on buttons */
	button::-moz-focus-inner {
		padding: 0;
		border: 0
	}

	/* normal button */
	.x-btn {
		display: inline-block;

		.x-btn-small, .x-btn-medium, .x-btn-large {
			display: inline-block;
			border: 1px solid transparent;
			height: auto;
			border-radius: 0;
			box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
			background: $normal-button-bgcolor;

			em {
				display: inline-block;
			}

			button{
				background-color: transparent;
				box-sizing: border-box;
				/* override .x-btn button from ExtJs */
				color: $font-color-dark;
			}
		}
	}

	/* hovered button */
	.x-btn.x-btn-over {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			border-radius: 0;
			background: $normal-button-bgcolor-hover;
			box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
		}
	}

	/* active button */
	.x-btn.x-btn-over.x-btn-click, .x-btn.x-btn-click {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			border-radius: 0;
			background: $normal-button-bgcolor !important;
			box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.35);

			button {
				color: #333333;
			}
		}
	}

	/* focused normal button */
	.x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-click) {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			border: 1px solid $sky-blue !important;
		}
	}

	/* small button */
	.x-btn {
		.x-btn-small {
			button.x-btn-text {
				height: $button-small-height;
			}
		}
	}

	/* small button with text */
	.x-btn.x-btn-noicon, .x-btn.x-btn-text-icon {
		.x-btn-small {
			button {
				min-width: $button-small-text-min-width;
				padding: 0 $padding-medium;
			}
		}
	}
	/* small button with icon and text */
	/* standard icon size is 12x12px */
	.x-btn.x-btn-text-icon,
	.x-btn.x-btn-text-icon.zarafa-action {
		.x-btn-small {
			button.x-btn-text {
				padding-left: $padding-medium + 12px + $padding-medium;
				background-position: 4px center !important;
			}
		}
	}

	/* small button with only icon */
	/* standard icon size is 12x12px */
	.x-btn.x-btn-icon {
		.x-btn-small {
			button {
				width: $button-small-icon-width;
			}
		}
	}

	/* large button with only icon */
	.x-btn.x-btn-icon {
		.x-btn-large {
			button {
				height: $button-large-icon-height;
				width: $button-large-icon-width;
			}
		}
	}

	/* split button and arrow button */
	.x-btn {
		em.x-btn-split, em.x-btn-arrow {
			background-color: transparent !important;
			background-position: right 3px center !important;
			padding-right: 12px;

			button {
				border-right: 1px solid white;
			}
		}
	}
	.x-btn .x-btn-small{
		em.x-btn-split, em.x-btn-arrow {
			background-position: right 3px center !important;
			padding-right: 12px;

			button {
				border: none;
				border-right: 1px solid white;
			}
		}
	}

	.x-btn.zarafa-action .x-btn-small {
		em.x-btn-split, em.x-btn-arrow {
			background-position: right 3px center !important;
			padding-right: 12px;

			button {
				border: none;
				border-right: 1px solid white;
			}
		}
	}

/**************************************
 * Action buttons
 *************************************/

	/* Normal and Disable button */
	.x-btn.zarafa-action {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			background: $action-bgcolor !important;

			button {
				color: $action-fontcolor !important;
			}
		}
	}

	/* hovered button */
	.x-btn.zarafa-action.x-btn-over {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			background: $action-bgcolor-hover !important;
		}
	}

	/* focused action button */
	.x-btn.zarafa-action.x-btn-focus {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			background: $action-bgcolor-hover !important;
			box-shadow: 0 0 0 1px $white inset;
		}
	}

	/* active button */
	.x-btn.zarafa-action.x-btn-over.x-btn-click, .x-btn.zarafa-action.x-btn-click {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			background: $action-bgcolor !important;

			button {
				color: $font-color-light;
			}
		}
	}

	/* split button and arrow button */
	.x-btn.zarafa-action .x-btn-large {
		em.x-btn-split, em.x-btn-arrow {
			background-position: right 3px center !important;
		}
	}


    /* For popup or windows or MessageBox, the first button is styled green */
    /* Extra class .xpanel-footer necessary for "Create Mail => Insert Item" pagination buttons */
    .x-window {
    	.x-panel-footer,
    	.x-window-footer {
    		.x-toolbar-left-row,
    		.x-toolbar-right-row {
				.x-toolbar-cell:not(.x-hide-offsets) {
					.x-btn:not(.k-window-text-button) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							border: 1px solid transparent !important;
						}
					}

					/* action button */
    				.x-btn:not(.zarafa-normal) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background: $action-bgcolor !important;

							button {
								color: $action-fontcolor;
							}
						}
					}

					/* hovered action button */
					.x-btn.x-btn-over:not(.zarafa-normal) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background: $action-bgcolor-hover !important;
						}
					}

					/* active action button */
					.x-btn.x-btn-over.x-btn-click:not(.zarafa-normal),
					.x-btn.x-btn-click:not(.zarafa-normal) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background: $action-bgcolor !important;
						}
					}

					/* focused action button */
					.x-btn.x-btn-focus:not(.zarafa-normal) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background: $action-bgcolor-hover;
							box-shadow: 0 0 0 1px $white inset;
						}
					}
				}

				.x-toolbar-cell:not(.x-hide-offsets) ~ .x-toolbar-cell:not(.x-hide-offsets) {
					/* Normal button */
    				.x-btn:not(.zarafa-action):not(.k-recipient-hover-card-button) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background-color: $normal-button-bgcolor !important;

							button {
								color: $font-default-color;
							}
						}
					}

					/* hovered normal button */
					.x-btn.x-btn-over:not(.zarafa-action):not(.k-recipient-hover-card-button) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background: $normal-button-bgcolor-hover !important;
						}
					}

					/* active normal button */
					.x-btn.x-btn-over.x-btn-click:not(.zarafa-action),
					.x-btn.x-btn-click:not(.zarafa-action) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							background: $normal-button-bgcolor !important;
						}
					}

					/* focused normal button */
					.x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-over):not(.x-btn-click) {
						.x-btn-small, .x-btn-medium, .x-btn-large {
							border: 1px solid $sky-blue !important;
							box-shadow: none !important;
						}
					}
				}
			}
		}
    }

	/* Drag & Drop icon override, select mail drag to folder hiearchy. */
	.x-tree-drop-ok-append .x-dd-drop-icon,
	.x-tree-drop-ok-append-add .x-dd-drop-icon,
	.x-dd-drag-proxy.x-dd-drop-nodrop .x-dd-drop-icon {
		top: 6px;
	}

	/* Override ExtJS group icon sprite */
	.x-btn-group-ml, .x-btn-group-mr {
		background-image: none !important;
	}

/*******************************************************
 * Button groups, used in previewpanel meeting requests
 *******************************************************/

	div.x-btn-group-tl {
		background-image: none;
	}

	div.x-btn-group-tr {
		background-image: none;
	}

	div.x-btn-group-notitle .x-btn-group-tc {
		background-image: none;
	}

	div.x-btn-group-bl {
		background-image: none;
	}

	div.x-btn-group-br {
		background-image: none;
	}

	div.x-btn-group-bc {
		background-image: none;
	}


.x-window {
	.k-recipient-hover-card-button {
		.x-btn-small {
			background-color: transparent !important;
			box-shadow: none !important;
		}
	}

	.k-recipient-hover-card-button.x-btn.x-btn-over {
		.x-btn-small, .x-btn-medium, .x-btn-large {
			border: 1px solid $grey2 !important;
		}
	}

	.x-panel-footer, .x-window-footer {
		.x-toolbar-left-row, .x-toolbar-right-row {
			.x-toolbar-cell:not(.x-hide-offsets) {
				.k-recipient-hover-card-button.x-btn.x-btn-over {
					.x-btn-small, .x-btn-medium, .x-btn-large {
						border: 1px solid $grey2 !important;
					}
				}
			}
		}
	}

	.k-hover-card-email-text {
		padding-right: $padding-medium !important;
	}
}

.k-window-text-button {
	.x-btn-small {
		background: transparent !important;
		box-shadow: none !important;
	}
	.x-btn-text {
		font-weight: bold;
	}
}

.k-window-text-button.x-btn.x-btn-over .x-btn-small{
	background: transparent !important;
	border: 1px solid $grey2 !important;
}
