@use '../variables' as *;

.#{$prefix}tabs {
	width: 100%;
	white-space: nowrap;
	flex-wrap: wrap;
	display: flex;
	align-items: center;

	&--start {
		justify-content: flex-start;
	}

	&--center {
		justify-content: center;
	}

	&--end {
		justify-content: flex-end;
	}

	&--stretch .#{$prefix}tab {
		flex-grow: 1;
	}

	@media (max-width: 767px) and (hover: none) {
		overflow: auto;
	}
}

.#{$prefix}tab {
	position: relative;
	padding-block: var(--#{$prefix}tab-padding-y);
	padding-inline: var(--#{$prefix}tab-padding-x);
	font-size: var(--#{$prefix}tab-font-size);
	font-weight: var(--#{$prefix}tab-font-weight);
	text-decoration: none;
	vertical-align: middle;
	border-radius: var(--#{$prefix}tab-border-radius);
	z-index: 1;
	color: var(--#{$prefix}tab-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	&:hover {
		text-decoration: none;
	}

	&--disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	&--closable {
		padding-inline-end: calc(var(--#{$prefix}tab-padding-x) / 2);
	}

	&__start-content,
	&__end-content {
		display: flex;
		align-items: center;
	}

	&__content {
		position: relative;
		height: var(--#{$prefix}tab-height);
		display: inline-flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	&__indicator {
		position: absolute;
		height: var(--#{$prefix}tab-indicator-height);
		border-radius: var(--#{$prefix}tab-indicator-border-radius);
		border: var(--#{$prefix}tab-indicator-border);
		border-bottom: var(--#{$prefix}tab-indicator-border-bottom);
		inset: auto 0px 0px;
		z-index: -1;
		color: var(--#{$prefix}tab-indicator-color);
		transform-origin: left bottom;
	}

	&__closable {
		position: relative;
		padding: 0.125rem;
		color: var(--#{$prefix}tab-closable-color);
		border-radius: 9999px;
		transform: scale(0.75);
		cursor: pointer;
		transition: all 0.15s ease-in-out;

		&:hover {
			transform: scale(1);
		}

		&::after {
			position: absolute;
			content: '';
			inset: 0px;
			border-radius: inherit;
			background-color: currentColor;
			opacity: 0;
		}
	}
}