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

@mixin type-modal () {

	$height: 36px;

	& {
		position: relative;
	}
	&:before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;
		background-color: $modal-line;
	}

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

	.tab {
		@include flex-row-auto();
		position: relative;
		min-width: 18px;
		height: $height;
		&,
		& * {
			cursor: pointer;
		}
		&:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 3px;
			background: $modal-tab-line;
			transition: background 0.2s ease;
		}
		&:hover {
			.tab__title {
				color: $modal-title-color-hover;
			}
		}
	}
	.tab--disabled {
		&,
		&:hover {
			&:after {
				background: $modal-tab-line;
			}
			.tab__title {
				color: $modal-title-color-disabled;
			}
		}
	}
	.tab--current {
		&:after {
			background: $modal-tab-line-current;
		}
		.tab__title {
			color: $modal-title-color-current;
		}
	}
	.tab__icon {
		display: none;
	}
	.tab__title {
		@include text-single-line();
		@include font-family();
		padding: 4px 8px 0px 8px;
		line-height: 18px;
		font-size: 13px;
		text-align: center;
		text-transform: uppercase;
		user-select: none;
		color: $modal-title-color;
		transition: color 0.2s ease;
	}
}