@import '../../../scss/index.scss';

@mixin type-content () {
	$tab-height: 42px;
	$tab-icon-size: 18px;
	$tab-margin: 8px;

	.row {
		@include flex-row-auto();
		height: $tab-height;
	}

	.tab {
		@include flex-row-auto();
		align-items: center;
		position: relative;
		min-width: 18px;
		height: $tab-height;
		&,
		& * {
			cursor: pointer;
		}
		&:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 2px;
			background: $content-tab-border;
			transition: background 0.2s ease;
		}
	}
	.tab--current {
		&:after {
			background: $content-tab-border-current;
		}
		.tab__icon {
			fill: $content-tab-icon-current;
		}
	}
	.tab__icon {
		width: $tab-icon-size;
		height: $tab-icon-size;
		margin: auto 0;
		margin-left: $tab-margin;
		fill: $content-tab-icon;
		transition: fill 0.2s ease;
	}
	.tab__title {
		@include text-single-line();
		@include font-family();
		padding: 0 $tab-margin;
		font-size: 16px;
		text-align: center;
		user-select: none;
		color: $content-tab-title;
	}
}