@use 'sass:map';
@use '../../../variables' as *;

$_sizes: (
	xs:  (height: 16px, px: 8px,  fs: 10px, icon: 10px),
	sm:  (height: 20px, px: 8px,  fs: 11px, icon: 12px),
	md:  (height: 24px, px: 12px, fs: 12px, icon: 16px),
	lg:  (height: 28px, px: 16px, fs: 14px, icon: 18px),
	xl:  (height: 32px, px: 16px, fs: 16px, icon: 20px),
	2xl: (height: 36px, px: 16px, fs: 18px, icon: 24px),
);

.#{$prefix}theme-centurion {
	@each $size, $t in $_sizes {
		.#{$prefix}tabs--#{$size} {
			--#{$prefix}tab-height: #{map.get($t, height)};
			--#{$prefix}tab-padding-x: #{map.get($t, px)};
			--#{$prefix}tab-font-size: #{map.get($t, fs)};

			.#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
				--#{$prefix}icon-font-size-default: #{map.get($t, icon)};
			}
		}
	}

	.#{$prefix}tab {
		--#{$prefix}tab-height: 24px;
		--#{$prefix}tab-padding-x: 12px;
		--#{$prefix}tab-font-size: 12px;
		--#{$prefix}tab-padding-y: 0px;
		--#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
		--#{$prefix}tab-font-weight: 500;

		--#{$prefix}tab-closable-color: var(--#{$prefix}secondary-action-color);
	}

	.#{$prefix}tabs--underlined {
		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
		--#{$prefix}tab-indicator-height: 3px;
		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
	}

	.#{$prefix}tabs--underlined .#{$prefix}tab {
		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
		--#{$prefix}tab-indicator-height: 3px;
		--#{$prefix}tab-indicator-border-radius: 3px;
		--#{$prefix}tab-border-radius: 0px;

		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.08;
			--#{$prefix}_active-overlay-opacity: 0.12;
		}

		&--selected {
			--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
		}

		&--selected &__indicator {
			--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
		}
	}

	.#{$prefix}tabs--underlined .#{$prefix}tab__indicator {
		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0;
			--#{$prefix}surface-transition: none;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-transition: none;
		}
	}

	.#{$prefix}tabs--underlined .#{$prefix}tab--selected .#{$prefix}tab__indicator {
		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 1;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
		}
	}

	.#{$prefix}tabs--pills {
		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
		--#{$prefix}tab-indicator-height: 3px;
		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
	}

	.#{$prefix}tabs--pills .#{$prefix}tab {
		--#{$prefix}tab-indicator-height: 100%;
		--#{$prefix}tab-indicator-border-radius: 9999px;
		--#{$prefix}tab-border-radius: 9999px;

		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.08;
			--#{$prefix}_active-overlay-opacity: 0.12;
		}
	}

	.#{$prefix}tabs--pills .#{$prefix}tab--selected {
		--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
	}

	.#{$prefix}tabs--pills .#{$prefix}tab__indicator {
		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0;
			--#{$prefix}surface-transition: none;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.08;
			--#{$prefix}_active-overlay-opacity: 0.12;
		}
	}

	.#{$prefix}tabs--pills .#{$prefix}tab--selected .#{$prefix}tab__indicator {
		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0.12;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.08;
			--#{$prefix}_active-overlay-opacity: 0.12;
		}
	}

	.#{$prefix}tabs--outlined {
		--#{$prefix}tab-indicator-color: #fff;
		--#{$prefix}tab-indicator-height: 100%;
		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;

		--#{$prefix}tab-border-radius: 3px 3px 0px 0px;
	}

	.#{$prefix}tabs--outlined .#{$prefix}tab {
		--#{$prefix}tab-border-radius: 0px;
		--#{$prefix}tab-color: #000;

		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.08;
			--#{$prefix}_active-overlay-opacity: 0.12;
		}
	}

	.#{$prefix}tabs--outlined .#{$prefix}tab__indicator {
		--#{$prefix}tab-indicator-border: 1px solid transparent;
		--#{$prefix}tab-indicator-border-bottom: 1px solid #c8cdd4;

		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 0;
			--#{$prefix}surface-transition: none;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}overlay-transition: none;
		}
	}

	.#{$prefix}tabs--outlined .#{$prefix}tab--selected {
		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-opacity: 0;
			--#{$prefix}_active-overlay-opacity: 0;
		}
	}

	.#{$prefix}tabs--outlined .#{$prefix}tab--selected .#{$prefix}tab__indicator {
		--#{$prefix}tab-indicator-border: 1px solid #c8cdd4;
		--#{$prefix}tab-indicator-border-bottom: 1px solid #fff;

		& > .#{$prefix}surface {
			--#{$prefix}surface-opacity: 1;
		}

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
		}
	}
}