.component.tabs {
	width: 100%;

	.tabs-nav {
		display: flex;
		flex-direction: row;
		flex-wrap: no-wrap;
		gap: 0;

		.tab {
			background-color: $color-bg;
			padding: $std-pd-sm $std-pd-md;
			border-radius: $border-rad-lg $border-rad-lg 0 0;
			transition-duration: $trans-du;
			transition-property: color, background-color;
			cursor: default;

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

			&.active {
				background-color: $color-primary;
				color: $color-text-inverted;

				&:hover {
					color: $color-text-inverted;
				}
			}
		}
	}

	.tabs-content {
		background-color: $color-bg;
		overflow: hidden;
		position: relative;
		border-radius: 0 $border-rad-xl $border-rad-xl $border-rad-xl;

		.tab-content {
			background-color: $color-bg;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			opacity: 0;
			visibility: hidden;
			transition-duration: $trans-du;
			transition-property: opacity, visibility;

			&.active {
				opacity: 1;
				visibility: visible;
			}
		}
	}
}