/*
	----------------
	- Buttons
	----------------
*/

.ipsButtons{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
}

	.ipsButtons--start{
		justify-content: flex-start;
	}
	.ipsButtons--end{
		justify-content: flex-end;
	}

	/* Let buttons determine their width */
	.ipsButtons > li{ display: contents; }

	/* Hide empty button containers */
	.ipsButtons:not(:has(.ipsButton)){ display: none }
	@supports not selector(a:has(b)){
		.ipsButtons:-moz-only-whitespace{ display: none }
	}

/* Full width buttons */
.ipsButtons--fill .ipsButton{
	flex-grow: 1;
}
.ipsButtons--fill .ipsButton--primary{
	flex-grow: 2;
}

@media (max-width: 600px){
	/* Buttons fill the entire width on small screens. */
	.ipsButtons :is(.ipsButton, .ipsButtonGroup){
		flex-grow: 1;
	}
	/* Primary buttons occupy more space */
	.ipsButtons .ipsButton--primary{
		flex-grow: 3;
	}
	/* If at least 3 buttons exist, make the primary button occupy its own row */
	.ipsButtons:has(> li:nth-child(3)) .ipsButton--primary{
		flex: 999 1 100%;
	}
		.ipsButtons:has(.ipsButtonGroup) .ipsButton--primary{
			flex: 999 1 auto;
		}

		.ipsButtons .ipsButton--text{
			--i-button--pa-in: 1em;
		}
}

/* Button groups  */
.ipsButtonGroup{
	--i-co: var(--i-color_soft);
	--i-outline-color: currentColor;
	align-items: stretch;
	background-clip: padding-box;
	background-color: var(--i-background_1);
	border: 1px solid color-mix(in srgb, var(--i-co) 20%, transparent);
	border-radius: calc(var(--i-button--bo-ra) * 1px);
	box-shadow: hsl(0 0% 0% / .06) 0px 2px 3px;
	color: var(--i-co);
	display: inline-flex;
	flex-wrap: wrap;
	gap: 3px;
	padding: 3px;
	vertical-align: baseline;
}

	.ipsButtonGroup--small{
		--i-button--pa-bl: .8em;
		--i-button--pa-in: 1.2em;
		--i-button--fo-si: .85em;
	}

	.ipsPageHeader .ipsButtonGroup{
		display: flex;
	}

	.ipsButtonGroup .ipsButton{
		flex: 1 1 auto;
	}

.ipsButton{
	--i-button--co: var(--i-co);
	--i-button--ba-co: transparent;
	--i-button--bo-co: transparent;
	--i-button-hover--ba-co: color-mix(in srgb, var(--i-button--ba-co), #fff 20%);
	--i-outline-color: var(--i-button--ba-co);
	align-items: center;
	background-color: var(--i-button--ba-co);
	border-width: var(--i-button--bo-wi);
	border-style: var(--i-button--bo-st);
	border-color: var(--i-button--bo-co);
	border-radius: calc(var(--i-button--bo-ra) * 1px);
	box-shadow: var(--i-button--bo-sh);
	color: var(--i-button--co);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--i-button--fo-si, inherit);
	font-weight: var(--i-button--fo-we);
	gap: 0 .6em;
	justify-content: center;
	line-height: var(--i-button--li-he, 1);
	min-width: 44px;
	padding: var(--i-button--pa-bl) var(--i-button--pa-in);
	/* position: relative; */ /* This causes the "Save" button to overlap the auto-complete menu while editing the Poll widget */
	text-align: center;
	text-decoration: none !important;
	text-transform: var(--i-button--te-tr, none);
	touch-action: manipulation;
	vertical-align: baseline;
}

/* This is rarely used, but appears in the Buy Now button on a paid product (Eg. +GST) */
.ipsButton .i-color_soft{
	color: inherit;
	opacity: .6;
}

/* Fallback */
@supports not (color: color-mix(in srgb, red, red)){
	.ipsButton{
		--i-button-hover--ba-co: var(--i-button--ba-co);
	}
}

/* Flex gap fallback for < iOS 14.1 */
@supports (-webkit-touch-callout: none) and (not(translate: none)){
	.ipsButton > :not(:first-child){
		margin-inline-start: .6em;
	}
}

	/* Links are sometimes placed inside div.button, such as on the "Manage Followed Content" page */
	.ipsButton a{
		color: inherit;
	}

	.ipsButton svg{
		height: 1em;
		width: auto;
	}

	.ipsButton:active{
		transform: translateY(1px);
	}

	@media (any-hover:hover){
		.ipsButton:hover{
			background-color: var(--i-button-hover--ba-co);
		}
	}

		.ipsButtonGroup > li{
			display: contents;
		}

		.ipsButtonGroup .ipsButton{
			border-radius: max(0px, var(--i-button--bo-ra) * 1px - 3px);
			flex: 1 1 auto;
			padding-top: calc(var(--i-button--pa-bl) - 3px);
			padding-bottom: calc(var(--i-button--pa-bl) - 3px);
		}

		.ipsButtonGroup .ipsButton:where(:hover){
			background-color: var(--i-background_3);
			color: var(--i-color_hard);
		}

		.ipsButtonGroup .ipsButton--active{
			--i-outline-color: var(--i-secondary);
			background-color: var(--i-secondary);
			color: var(--i-secondary-contrast);
		}

.ipsButton__segment{
	flex-grow: 0;
	padding: 0 .85em;
	border-inline-start: 1px solid transparent;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
	display: flex;
	align-items: center;
	align-self: stretch;
	margin-top: calc(var(--i-button--pa-bl) * -.4);
	margin-bottom: calc(var(--i-button--pa-bl) * -.4);
	margin-inline-end: calc(var(--i-button--pa-in) * -1);
	margin-inline-start: calc(var(--i-button--pa-in) - .6em);
}

	.ipsButton--text{
		--i-button--co: var(--i-co);
		--i-outline-color: var(--i-button--co);
		--i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 5%, transparent);
	}

	.ipsButton--inherit,
	.ipsButton--follow:not(.ipsButton--follow-active){
		--i-outline-color: var(--i-button--co);
		--i-button--co: currentColor;
		--i-button--bo-co: transparent;
		--i-button--ba-co: color-mix(in srgb, var(--i-button--co) 10%, transparent);
		--i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 15%, transparent);
	}

	.ipsButton--primary{
		--i-button--ba-co: var(--i-primary-button--ba-co);
		--i-button--co: var(--i-primary-button--co);
	}

	.ipsButton--secondary{
		--i-button--ba-co: var(--i-secondary-button--ba-co);
		--i-button--co: var(--i-secondary-button--co);
	}

	.ipsButton--positive{
		--i-button--ba-co: var(--i-color_positive);
		--i-button--co: hsl(0 0% 100%);
	}

	.ipsButton--negative{
		--i-button--ba-co: var(--i-color_negative);
		--i-button--co: hsl(0 0% 100%);
	}

	.ipsButton--soft{
		--i-outline-color: currentColor;
		--i-button--ba-co: var(--i-background_1);
		--i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 3%, var(--i-button--ba-co));
		--i-button--bo-co: color-mix(in srgb, var(--i-button--co) 20%, transparent);
		--i-button--bo-sh: hsl(0 0% 0% / .06) 0px 2px 3px;
		background-clip: padding-box;
	}

	.ipsButton--overlay{
		--i-button--co: hsl(0 0% 100%);
		--i-button--ba-co: hsl(0 0% 0% / .4);
		--i-button-hover--ba-co: hsl(0 0% 0% / .7);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.ipsButton--follow-active{
		--i-button--ba-co: var(--i-secondary);
		--i-button--co: var(--i-secondary-contrast);
	}

	.ipsButton[disabled],
	.ipsButton[aria-disabled="true"],
	.ipsButton--disabled{
		filter: grayscale(1) opacity(60%);
		pointer-events: none;
		cursor: not-allowed;
	}

/* Follow buttons */
[data-controller="core.front.core.followButton"]{
	display: contents;
}
.ipsButton--follow{
	padding: 0;
	gap: 0;
}
	.ipsButton--follow > a,
	.ipsButton--follow > span{
		display: flex;
		gap: .6em;
		padding: var(--i-button--pa-bl) var(--i-button--pa-in);
		color: inherit;
	}
	.ipsButton--follow a{
		pointer-events: auto;
		/* Necessary for full width Follow buttons */
		flex: 1 1 auto;
		justify-content: center;
	}
	.ipsButton--follow a:first-child{
		border-start-start-radius: inherit;
		border-end-start-radius: inherit;
	}
	.ipsButton--follow a:last-child{
		border-start-end-radius: inherit;
		border-end-end-radius: inherit;
	}
	@media (any-hover:hover){
		.ipsButton--follow-active{
			--i-button-hover--ba-co: var(--i-button--ba-co);
		}
		.ipsButton--follow-active a:hover{
			background-color: color-mix(in srgb, currentColor 10%, transparent);
		}
	}
	.ipsButton--follow .ipsButton__segment{
		margin: 0;
		padding: var(--i-button--pa-bl) calc(var(--i-button--pa-in) * .7);
		flex: 0 0 auto;
	}

/* Larger size */
.ipsButton--large,
.ipsButtons--large,
.ipsButtons--main{
	--i-button--pa-bl: 1.2em;
	--i-button--pa-in: 1.8em;
}

.ipsButtonGroup.ipsButtons--large{
	--i-button--pa-in: .8em;
}

.ipsButton--small,
.ipsButtons--small{
	--i-button--pa-bl: .8em;
	--i-button--pa-in: 1.2em;
	--i-button--fo-si: .85em;
}

.ipsButton--tiny,
.ipsButtons--tiny{
	--i-button--pa-bl: .4em;
	--i-button--pa-in: 1.2em;
	--i-button--fo-si: .85em;
}

.ipsButtons--main{
	justify-content: flex-end;
}

@media (max-width: 700px){
	.ipsButtons--main{
		--i-button--pa-bl: .9em;
		--i-button--pa-in: .9em;
	}
}

/* Automatic contrast for inherited buttons in ipsButtons--main */
:where(.ipsButtons--main:not(.ipsBox *)){
	--i-co: var(--i-color_contrast, currentColor);
	color: var(--i-co);
}

.ipsButton--wide{
	width: 100%;
}

/* Icon button */
.ipsButton--icon{
	--i-button--pa-in: .75em;
}

/* Dropdown icon in buttons */
.ipsMenuCaret{
	flex: 0 0 auto;
	align-self: center;
	font-family: var(--i-font-awesome);
	-webkit-font-smoothing: antialiased;
	text-rendering: auto;
	font-weight: 900;
	font-style: normal;
	font-size: .8em;
	opacity: .7;
}

	.ipsMenuCaret::before{
		content: "\f0d7";
	}

	.ipsButton[aria-expanded="true"] .ipsMenuCaret::before{
		content: "\f0d8";
	}

/* Social buttons */
.ipsSocial {
	color: #fff;
	display: flex;
	align-items: stretch; /* Overwrite default Safari styles */
	font-weight: 600;
	border-radius: min(var(--i-design-radius), var(--i-button--bo-ra) * 1px);
	overflow: hidden;
	width: 100%;
	text-align: center;
	box-shadow: inset color-mix(in srgb, var(--i-co) 20%, transparent) 0px 0px 0px 1px;
}

	@media (any-hover:hover){
		.ipsSocial:hover{
			filter: brightness(1.07);
		}
	}

	.ipsSocial__icon {
		display: grid;
		place-content: center;
		flex: 0 0 auto;
		width: 2.6em; /* Needed to prevent text from squashing */
		background: hsl(0 0% 0% / .2);
		font-size: 1.2em;
	}

		.ipsSocial__icon svg{
			fill: currentColor;
			height: 1em;
		}
	
		.ipsSocial__icon img {
			max-width: 1em;
		}

	.ipsSocial__text {
		padding: calc(1px + var(--i-button--pa-bl)) var(--i-button--pa-in);
		flex: 1 1 auto;
		line-height: 1;
	}

	.ipsSocial--microsoft {
		background-color: #008b00;
	}

	.ipsSocial--facebook {
		background-color: #3a579a;
	}

	.ipsSocial--twitter {
		background-color: #000000;
	}

	.ipsSocial--linkedIn {
		background: #007eb3;
	}

	.ipsSocial--google {
		background-color: #4285F4;
	}
	
	.ipsSocial--internal {
		background-color: #008b00;
	}