.gs-tabs {
	display: block;
	width: 100%;

	&__list {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.375rem;
		margin-bottom: 1.5rem;
		position: relative;

		li {
			margin: 0;
		}

		.gs-tab {
			// button reset
			border: none;
			margin: 0;
			cursor: pointer;
			font-size: inherit;
			color: inherit;
			text-align: left;
			// styles
			display: flex;
			align-items: center;
			padding: 20px 14px;
			background: transparent;
			font-weight: 500;
			transition: color 0.1s ease-in-out;
			margin-bottom: -1px;
			gap: 4px;

			&:hover {
				color: #000;
			}

			&.is-active {
				color: #000;
			}

			&--status-empty::before,
			&--status-ok::before,
			&--status-error::before {
				content: '';
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin-right: 6px;
				background-color: #adb5bc;
			}

			&--status-ok::before {
				background-color: #19a871;
			}

			&--status-error::before {
				background-color: #c44a4c;
			}
			&__badge {
				min-height: 14px;
				border-radius: 10px;
				display: inline-block;
				font-size: 11px;
				font-weight: 600;
				line-height: 1.5;
				padding: 3px 7px;
				background-color: #e2f3ec;
				color: #439146;
				margin-left: 1px;
			}
		}
	}

	&__underline {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 2px;
		background-color: #4ca74e;
		border-radius: 1px;
		transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
	}
}