/**
 * Icons inside Flatsome Tabs.
 */

.tabbed-content > .nav > .ux-tab-has-icon > a {
	align-items: center;
	display: flex;
	gap: 0;
	justify-content: center;
}

.tabbed-content > .nav > .ux-tab-icon-top > a {
	flex-direction: column;
}

.tabbed-content > .nav > .ux-tab-icon-left > a {
	flex-direction: row;
}

.tabbed-content > .nav > .ux-tab-icon-right > a {
	flex-direction: row-reverse;
}

.tabbed-content > .nav > .ux-tab-icon-top > a > .ux-tab-icon {
	margin-bottom: var(--ux-tab-icon-spacing, 8px);
}

.tabbed-content > .nav > .ux-tab-icon-left > a > .ux-tab-icon {
	margin-right: var(--ux-tab-icon-spacing, 8px);
}

.tabbed-content > .nav > .ux-tab-icon-right > a > .ux-tab-icon {
	margin-left: var(--ux-tab-icon-spacing, 8px);
}

.ux-tab-icon {
	display: block;
	flex: 0 0 var(--ux-tab-icon-width, 36px);
	line-height: 1;
	max-width: 100%;
	width: var(--ux-tab-icon-width, 36px);
}

.ux-tab-icon-inner {
	align-items: center;
	border-color: currentColor;
	border-radius: 999px;
	border-style: solid;
	border-width: var(--ux-tab-icon-border, 0);
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	transition: background-color 0.2s, color 0.2s;
	width: 100%;
}

.ux-tab-icon.has-icon-bg .ux-tab-icon-inner {
	aspect-ratio: 1;
}

.ux-tab-icon img,
.ux-tab-icon svg {
	display: block;
	fill: currentColor;
	height: auto;
	margin: 0;
	max-height: var(--ux-tab-icon-width, 36px);
	padding: 0;
	width: 100%;
}

.ux-tab-icon svg,
.ux-tab-icon svg path {
	fill: currentColor;
}

.ux-tab-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.ux-tab-icon.has-icon-bg img,
.ux-tab-icon.has-icon-bg svg {
	height: 60%;
	object-fit: contain;
	width: 60%;
}

.tabbed-content > .nav > .ux-tab-has-icon:hover .ux-tab-icon.has-icon-bg .ux-tab-icon-inner,
.tabbed-content > .nav > .ux-tab-has-icon.active .ux-tab-icon.has-icon-bg .ux-tab-icon-inner {
	background-color: currentColor;
}

.tabbed-content > .nav > .ux-tab-has-icon:hover .ux-tab-icon.has-icon-bg svg,
.tabbed-content > .nav > .ux-tab-has-icon:hover .ux-tab-icon.has-icon-bg svg path,
.tabbed-content > .nav > .ux-tab-has-icon.active .ux-tab-icon.has-icon-bg svg,
.tabbed-content > .nav > .ux-tab-has-icon.active .ux-tab-icon.has-icon-bg svg path {
	fill: #fff;
}

.tabbed-content > .nav > .ux-tab-has-icon:hover .ux-tab-icon.has-icon-bg svg [stroke]:not([stroke="none"]),
.tabbed-content > .nav > .ux-tab-has-icon.active .ux-tab-icon.has-icon-bg svg [stroke]:not([stroke="none"]) {
	stroke: #fff;
}

.ux-tab-title {
	line-height: 1.25;
}

@media (max-width: 549px) {
	.tabbed-content > .nav:not(.nav-vertical) > .ux-tab-has-icon > a {
		min-width: max-content;
	}
}