// Variables
@primary-color: #1780FE;
@text-color: #303133;
@border-color: #e4e7ed;
@active-color: #1780FE;
@disabled-color: #c0c4cc;


.tabs-container {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	width: 100%;
	margin: 20px auto;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 0;
}

.tabs-header {
	position: relative;
	border-bottom: 1px solid @border-color;
}

.tabs-nav {
	display: flex;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: auto;
}

.tabs-item {
	// padding: 0 20px;
	padding: 0 10px;
	height: 48px;
	line-height: 48px;
	font-size: 14px;
	color: @text-color;
	cursor: pointer;
	text-align: center;
	transition: all 0.3s;
	white-space: nowrap;

	&:hover {
		color: @primary-color;
	}

	&.active {
		color: @active-color;
	}

	&.disabled {
		color: @disabled-color;
		cursor: not-allowed;
	}
}

.tabs-active-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	background-color: @active-color;
	z-index: 1;
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.tabs-content {
	// padding: 20px;

	.tab-pane {
		display: none;

		&.active {
			display: block;
			animation: fadeIn 0.3s;
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}