/* Buttons: various buttons used in the interface */
/* ======================================================== */
/* BASE BUTTONS */
.ipsApp .ipsButton {
	font-size: {fontsize="medium"};
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	padding: 10px 20px;
	border-radius: var(--button--radius);
	border: 1px solid transparent;
	transition: 0.1s all linear;
	cursor: pointer;
	{prefix="user-select" value="none"}
}

	.ipsApp .ipsButton:hover:not(:active) {
		background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.08) 100%);
	}

	.ipsApp .ipsButton:active,
	.ipsApp .ipsButton_active {
		border-color: rgba(0,0,0,0.1);
		background-image: linear-gradient(to bottom, rgba( var(--theme-text_dark), 0.1 ) 0%, rgba( var(--theme-text_dark), 0.1 ) 100%);
	}

/* ======================================================== */
/* COLORS */
.ipsApp .ipsButton_normal {
	background: rgb( var(--theme-normal_button) );
	color: rgb( var(--theme-normal_button_font) );
}

.ipsApp .ipsButton_primary {
	font-weight: 500;
	background: rgb( var(--theme-primary_button) );
	color: rgb( var(--theme-primary_button_font) );
}

.ipsApp .ipsButton_alternate {
	background: rgb( var(--theme-alternate_button) );
	color: rgb( var(--theme-alternate_button_font) );
}

.ipsApp .ipsButton_important {
	font-weight: 500;
	background: rgb( var(--theme-important_button) );
	color: rgb( var(--theme-important_button_font) );
}

.ipsApp .ipsButton_positive {
	background: var(--positive-dark);
	color: var(--positive-light);
}

.ipsApp .ipsButton_intermediate {
	background: var(--intermediate-dark);
	color: var(--intermediate-light);
}

.ipsApp .ipsButton_negative {
	background: var(--negative-dark);
	color: var(--negative-light);
}

.ipsApp .ipsButton_light {
	background: rgb( var(--theme-light_button) );
	border-color: transparent;
	color: rgb( var(--theme-light_button_font) );
}
	
	.ipsApp .ipsButton_light:hover {
		background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.3) 100%);
	}

.ipsApp .ipsButton_veryLight {
	background: rgb( var(--theme-very_light_button) );
	border-color: rgba( var(--theme-very_light_button_font), 0.075 );
	color: rgb( var(--theme-very_light_button_font) );
}

	.ipsApp .ipsButton_veryLight.ipsButton_veryLight--negative {
		color: var(--negative-dark);
	}

/* Overlaid button - allows content behind to be seen */
.ipsApp .ipsButton_overlaid {
	background: rgba(0,0,0,0.5);
	opacity: 0.6;
	color: #fff;
	z-index: 2;
}

	.ipsApp .ipsButton_overlaid:hover {
		background: #000;
		opacity: 1;
	}

	.ipsApp .ipsButton_overlaid:active {
		background: #000;
	}

/* Link button - works like a button, but looks like text */
.ipsApp .ipsButton_link {
	background: transparent;
	color: rgb( var(--theme-link_button) );
	border-color: transparent;
	padding: 9px 20px;
	font-weight: normal;
}

	.ipsApp .ipsButton_link:active {
		box-shadow: none;
		background-image: none;
	}
	
	.ipsApp .ipsToolList .ipsButton_link,
	.ipsApp .ipsButton_link.ipsButton_link_secondary {
		border-color: transparent;
	}

	.ipsApp .ipsButton_link--negative {
		color: var(--negative-dark);
	}

	.ipsApp .ipsButton_link--light {
		color: rgb( var(--theme-text_light) );
	}

/* ======================================================== */
/* SIZES */
.ipsApp .ipsButton_medium {
	font-size: {fontsize="medium"};
	line-height: 3;
	padding: 0 20px;
}

.ipsApp .ipsButton_large {
	font-size: {fontsize="medium"};
	line-height: 3;
	padding: 0 20px;
}

.ipsApp .ipsButton_veryLarge {
	font-size: {fontsize="base"};
	line-height: 3;
	padding: 0 22px;
}

.ipsApp .ipsButton_small {
	font-size: {fontsize="small"};
	line-height: 2.83;
	padding: 0 18px;
}

.ipsApp .ipsButton_verySmall {
	font-size: {fontsize="small"};
	line-height: 2.33;
	padding: 0 15px;
}

.ipsApp .ipsButton_veryVerySmall {
	font-size: {fontsize="10"};
	line-height: 2;
	padding: 0 8px;
}

.ipsApp .ipsButton_tiny {
	font-size: 10px;
	line-height: 15px;
	padding: 0 4px;
}

/* ======================================================== */
/* OTHER BUTTON STYLES */
.ipsApp .ipsButton_fullWidth {
	display: block;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}

.ipsApp .ipsButton_action {
	min-width: 200px;
}

.ipsApp .ipsButton_narrow {
	padding-left: 8px;
	padding-right: 8px;
}

.ipsApp .ipsButton_shouting {
	text-transform: uppercase;
}

/* Disabled */
.ipsApp .ipsButton[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.ipsApp .ipsButton.ipsButton_disabled {
	opacity: 0.5;
}

/* ======================================================== */
/* SPLIT BUTTONS */
.ipsButton_split {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex;
	border-radius: var(--button--radius);
}

	.ipsList_inline ul.ipsButton_split {
		vertical-align: middle;
	}

	/* Adjust border-radius */
	.ipsButton_split > .ipsButton,
	.ipsButton_split > li > .ipsButton {
		border-radius: 0;
	}
		/* Allow buttons to inherit radius from parent */
		html[dir='ltr'] .ipsButton_split > :first-child,
		html[dir='rtl'] .ipsButton_split > :last-child{
			border-top-left-radius: inherit;
			border-bottom-left-radius: inherit;
		}

		html[dir='ltr'] .ipsButton_split > :last-child,
		html[dir='rtl'] .ipsButton_split > :first-child{
			border-top-right-radius: inherit;
			border-bottom-right-radius: inherit;
		}

		.ipsButton_split > li > .ipsButton{
			border-radius: inherit;
		}

	/* Overlap borders for cleaner layout */
	html[dir='ltr'] .ipsButton_split > :not(:first-child),
	html[dir='rtl'] .ipsButton_split > :not(:last-child){
		margin-left: -1px;
	}

	.ipsButton_split .ipsButton{
		position: relative;
		z-index: 1;
	}

		.ipsButton_split .ipsButton_primary{
			z-index: 2;
		}

.ipsButton_split > .ipsButton.ipsButton_link,
.ipsButton_split > li > .ipsButton.ipsButton_link {
	border-color: currentColor;
}

/* Light buttons usually have a transparent border so a colour is assigned for split buttons */
[dir='ltr'] .ipsButton_split > :not(:first-child) .ipsButton_light{
	border-left-color: rgba( var(--theme-text_color), 0.15 );
}
[dir='rtl'] .ipsButton_split > :not(:first-child) .ipsButton_light{
	border-right-color: rgba( var(--theme-text_color), 0.15 );
}

/* ======================================================== */
/* BUTTON BARS */
.ipsButtonBar {
	line-height: 1;
	background: rgb( var(--theme-button_bar) );
	border-bottom: 1px solid rgba( var(--theme-text_color), 0.15 );
}

.ipsButtonBar:first-child,
.ipsType_sectionTitle.ipsHide + .ipsButtonBar{
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

	.ipsButtonBar ~ .ipsButtonBar {
		border-bottom-width: 0;
		border-top: 1px solid rgba( var(--theme-text_color), 0.15 );
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	.ipsButtonBar .ipsPagination{
		color: rgb( var(--theme-text_dark) );
	}

	/* Pagination in button bars needs to be white */
	.ipsApp .ipsButtonBar .ipsPagination a {
		background: transparent;
	}

	.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a {
		background: rgb( var(--theme-pagination_active) );
		color: #fff;
	}

	.ipsButtonBar .ipsButtonRow li > a,
	.ipsButtonBar .ipsButtonRow li > button,
	.ipsButtonBar .ipsButtonRow li > span {
		background: rgb( var(--theme-area_background_reset) );
		color: rgb( var(--theme-text_dark) );
		font-weight: bold;
	}

html[dir="ltr"] .ipsButtonBar .ipsButtonRow {
	margin-left: 10px;
	padding: 0;
}
html[dir="rtl"] .ipsButtonBar .ipsButtonRow {
	margin-right: 10px;
	padding: 0;
}

	.ipsButtonBar .ipsButtonRow:last-child {
		margin-right: 0;
	}
	html[dir="rtl"] .ipsButtonBar .ipsButtonRow:last-child {
		margin-left: 0;
	}

.ipsButtonRow {
	display: inline-flex;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	position: relative;
	border-radius: 3px;
	list-style: none;
}

	.ipsButtonRow::before{
		content: '';
		position: absolute; top: 0; left: 0; right: 0; bottom: 0;
		border: 1px solid currentColor;
		opacity: 0.1;
		pointer-events: none;
		z-index: 1;
		border-radius: inherit;
	}

		.ipsButtonRow li > a, .ipsButtonRow li > button, .ipsButtonRow li > span {
			display: block;
			background: rgb( var(--theme-area_background_light) );
			background-clip: padding-box;
			line-height: 26px;
			padding: 0 10px;
			font-size: 10px;
			font-weight: 500;
			color: rgb( var(--theme-text_color) );
			text-transform: uppercase;
			position: relative;
			border: 0px;
			border-radius: 0;
		}

			html[dir="ltr"] .ipsButtonRow li:first-child > a, 
			html[dir="ltr"] .ipsButtonRow li:first-child > button,
			html[dir="ltr"] .ipsButtonRow li:first-child > span,
			html[dir="rtl"] .ipsButtonRow li:first-child > a, 
			html[dir="rtl"] .ipsButtonRow li:first-child > button,
			html[dir="rtl"] .ipsButtonRow li:first-child > span {
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
			html[dir="ltr"] .ipsButtonRow li:last-child > a, 
			html[dir="ltr"] .ipsButtonRow li:last-child > button,
			html[dir="ltr"] .ipsButtonRow li:last-child > span,
			html[dir="rtl"] .ipsButtonRow li:last-child > a, 
			html[dir="rtl"] .ipsButtonRow li:last-child > button,
			html[dir="rtl"] .ipsButtonRow li:last-child > span {
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}

			.ipsButtonRow li > a.ipsButtonRow_active,
			.ipsButtonRow li > button.ipsButtonRow_active {
				background: rgb( var(--theme-pagination_active) );
				border-color: rgb( var(--theme-pagination_active) );
				color: #fff;
				text-shadow: none;
			}

			html[dir="ltr"] .ipsButtonRow li + li a {
				border-left: 1px solid rgba( var(--theme-pagination_active), 0.1 );
				margin-left: -1px;
			}
			html[dir="rtl"] .ipsButtonRow li + li a {
				border-right: 1px solid rgba( var(--theme-pagination_active), 0.1 );
				margin-right: -1px;
			}

			.ipsAreaBackground_light .ipsButtonRow li > a:not( .ipsButtonRow_active ),
			.ipsAreaBackground_light .ipsButtonRow li > button:not( .ipsButtonRow_active ),
			.ipsAreaBackground_light .ipsButtonRow li > span:not( .ipsButtonRow_active ) {
				background: rgb( var(--theme-area_background_reset) );
			}
			
			.ipsAreaBackground_light .ipsButtonRow li > span.ipsButtonRow_noBackground {
				background: transparent;
			}
			
		.ipsButtonRow li .ipsIcon {
			position: relative;
			top: 3px;
		}

.ipsButtonRow li > span.ipsButtonRow_noBackground {
	background: transparent;
}

/* Social buttons */
.ipsSocial {
	color: #fff;
	padding: 0 !important;
	border: 0 !important;
	border-spacing: 0;
	min-width: 200px;
	line-height: 36px !important;
}

	@media screen and (min-width: 768px) {
		.ipsSocial {
			max-width: 315px;
		}
	}

	.ipsSocial:hover {
		color: #fff;
	}

	.ipsSocial_icon {
		display: table-cell;
		vertical-align: middle;
		height: 36px;
		min-width: 36px;
		font-size: 18px;
		background: rgba(0,0,0,0.2);
	}
		[dir='ltr'] .ipsSocial_icon{
			border-top-left-radius: inherit;
			border-bottom-left-radius: inherit;
		}
		[dir='rtl'] .ipsSocial_icon{
			border-top-right-radius: inherit;
			border-bottom-right-radius: inherit;
		}
	
	.ipsSocial_icon img {
		max-width: 16px;
		margin-left: -2px;
		margin-top: -2px;
	}

	.ipsSocial_text {
		display: table-cell;
		width: 100%;
		font-size: 13px;
	}

	.ipsSocial_microsoft {
		background-color: #008b00;
	}

	.ipsSocial_facebook {
		background-color: #3a579a;
	}

	.ipsSocial_twitter {
		background-color: #00abf0;
	}

	.ipsSocial_linkedIn {
		background: #007eb3;
	}

	.ipsSocial_google {
		background-color: #4285F4;
	}
		.ipsSocial_google .ipsSocial_icon {
			height: 36px;
			width: 36px;
			background-color: #fff;
			background-image: url( {resource="logos/login/Google.png" app="core" location="interface"} );
			background-size: 18px 18px;
			background-repeat: no-repeat;
			background-position: center center;
			box-shadow: inset 0px 0px 0px 1px #4285F4;
		}
			.ipsSocial_google .ipsSocial_icon .fa {
				display: none !important;
			}
	
	.ipsSocial_internal {
		background-color: #008b00;
	}