_tabs.scss

@include body-class(true) {

	// Tabs
	.sui-tabs:not(.sui-side-tabs) {

		> [data-tabs],
		> .sui-tabs-menu {
			display: flex;
			margin: 0;
			padding: 0;
			border-top: 1px solid $tabs-content-border-color;
			list-style: none;

			> *,
			.sui-tab-item {
				cursor: pointer;
				margin: 0 10px;
				padding: 14px 0 12px;
				border: 0; // Make sure borders are disabled when using "button" element for tabs.
				background-color: transparent;
				font: 500 13px/22px $font;
				letter-spacing: $font--letter-spacing;
				text-transform: uppercase;
				text-decoration: none;

				&,
				&:focus,
				&:hover,
				&:active,
				&:visited {
					outline: none; // Make sure outline blur is disabled when using "button" element for tabs.
					border-bottom: 2px solid transparent;
				}

				&,
				&:visited {
					color: $tabs-label-color;
				}

				&:focus,
				&:hover,
				&:active {
					color: $tabs-label-active-border-color;
				}

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}

				&.active {
					color: $tabs-label-active-border-color;
					border-bottom-color: $tabs-label-active-color;
				}

				@media (forced-colors: active) {
					forced-color-adjust: none;
				}
		
				@media (forced-colors: active) and (prefers-color-scheme: dark), (-ms-high-contrast: white-on-black) {
					color: $cloud !important;
					&.active {
						color: map-get($button-background, orange) !important;
						border-bottom: 2px solid map-get($button-background, orange) !important;
					}
				}
			}
		}

		> [data-panes],
		> .sui-tabs-content {

			> *,
			> .sui-tab-content {
				display: none;
				margin-top: -1px;
				padding: $sui-gutter-md 0 0;
				border-top: 1px solid #E6E6E6;

				&.active {
					display: block;
				}

				@include media(min-width, md) {
					padding: $sui-gutter 0 0;
				}
			}
		}

		// Flushed tabs
		&.sui-tabs-flushed {

			> [data-tabs],
			> .sui-tabs-menu {
				border-top-width: 0;
			}
		}

		// Overflowed tabs
		&.sui-tabs-overflow {
			position: relative;

			> [data-tabs],
			> .sui-tabs-menu {
				overflow: auto;
				scrollbar-width: none;
				scrollbar-height: none;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background: transparent;
				}

				> *,
				.sui-tab-item {
					flex: 0 0 auto;
				}
			}

			// Navigation for overflow.
			.sui-tabs-navigation {
				position: absolute;
				width: 100%;
				display: flex;
				justify-content: space-between;
				height: 50px;
				align-items: center;
				top: 1px;
				pointer-events: none;
				opacity: 1;

				&--left,
				&--right {
					background: rgba(255, 255, 255, 0.8);
					pointer-events: all;
					transition: all .2s;
				}
				&--hidden {
					visibility: hidden;
					opacity: 0;
				}
			}

			&:not(.sui-tabs-flushed) {
				border: 1px solid $tabs-content-border-color;
				border-radius: $border-radius;

				> [data-tabs],
				> .sui-tabs-menu {
					margin-right: $sui-gutter-md;
					margin-left: $sui-gutter-md;
					border-top-width: 0;

					@include media(min-width, md) {
						margin-right: $sui-gutter;
						margin-left: $sui-gutter;
					}
				}

				> [data-panes],
				> .sui-tabs-content {

					> *,
					> .sui-tab-content {
						padding-right: $sui-gutter-md;
						padding-bottom: $sui-gutter-md;
						padding-left: $sui-gutter-md;

						@include media(min-width, md) {
							padding-right: $sui-gutter;
							padding-bottom: $sui-gutter;
							padding-left: $sui-gutter;
						}
					}
				}
			}
		}
	}

	// Side Tabs
	.sui-side-tabs {
		margin: 0 0 $sui-gutter-md;

		> [data-tabs],
		> .sui-tabs-menu {
			display: flex;
			flex-wrap: wrap;
			margin: 0;
			padding: 0;
			list-style: none;

			> *,
			.sui-tab-item {
				cursor: pointer;
				flex: 0 0 auto;
				margin: 0 1px 0 0;
				padding: 9px 20px;
				border: 0; // Make sure borders are disabled when using "button" element for tabs.
				font: 500 13px/22px $font;
				letter-spacing: $font--letter-spacing;
				text-decoration: none;
				> *:not(input) {
					pointer-events: none;
				}

				&,
				&:focus,
				&:hover,
				&:active,
				&:visited {
					outline: none; // Make sure outline blur is disabled when using "button" element for tabs.
					background-color: $side-tabs--label-background;
					color: $side-tabs--label-color;
				}

				input {
					@extend %sui-screen-reader-text;
				}

				&:first-child {
					border-radius: $border-radius 0 0 $border-radius;
				}

				&:last-child {
					margin: 0;
					border-radius: 0 $border-radius $border-radius 0;
				}

				&.active {
					background-color: $side-tabs--label-active-background;
					color: $side-tabs--label-active-color;
				}

				@media (forced-colors: active) {
					forced-color-adjust: none;
				}
		
				@media (forced-colors: active) and (prefers-color-scheme: dark), (-ms-high-contrast: white-on-black) {
					background-color: $grey !important;
					color: $cloud !important;
					&.active {
						background-color: $nightrider !important;
						color: map-get($button-background, orange) !important;
					}
				}
			}
		}

		> [data-panes],
		> .sui-tabs-content {

			> *,
			> .sui-tab-content {
				display: none;
				margin: 10px 0 0;

				&.sui-tab-boxed {
					padding: $sui-gutter-md;
					border: 1px solid #E6E6E6;
					border-radius: $border-radius;

					@include media(min-width, md) {
						padding: $sui-gutter;
					}
				}

				&.active {
					display: block;
				}
			}

			// VARIATION: Large
			// This class will increase the space
			// between data-tabs and data-panes.
			&.sui-tabs-content-lg {

				> *,
				> .sui-tab-content {
					margin-top: 30px;
				}
			}
		}

		&:last-child {
			margin: 0;

			@include media(min-width, md) {
				margin: 0;
			}
		}
    
		// Removing unnecessary padding and border
		fieldset.sui-form-field{
			padding: 0;
			border: none;
		}

		@include media(min-width, md) {
			margin: 0 0 $sui-gutter;
		}
	}

	// Flushed tabs inside box
	.sui-box-body {

		> .sui-tabs-flushed {

			> [data-tabs],
			> .sui-tabs-menu {
				margin: 0 $sui-gutter-md;

				@include media(min-width, md) {
					margin: 0 $sui-gutter;
				}
			}

			> [data-panes],
			> .sui-tabs-content {

				> *,
				> .sui-tab-content {
					padding: $sui-gutter-md;

					@include media(min-width, md) {
						padding: $sui-gutter;
					}
				}
			}

			@include media(max-width, md) {
				margin: -#{$sui-gutter-md} !important;
			}

			@include media(min-width, md) {
				margin: -#{$sui-gutter} !important;
			}
		}
	}
}