.tab-area {
	width: 100%;
}
.tab {
	> ul {
		display: flex;
		align-items: center;
		overflow-x: auto;
		width: 100%;
	}
	li,
	.btn-tab {
		@include flex-layout(inline-flex, center, center);
		position: relative;
		white-space: nowrap;
	}
	.btn-tab {
		width: 100%;
		background-color: var(--#{$prefix}white);
		border: 1px solid var(--#{$prefix}white);
		color: var(--#{$prefix}gray-70);
		font-weight: map-get($fws, bold);
		transition: $transition-base;
		&:not(:disabled):hover {
			border-radius: .6rem;
			background-color: var(--krds-secondary-5);
			transition: $transition-base;
		}
		&:not(:disabled):active {
			background-color: var(--krds-secondary-10);
			transition: $transition-base;
		}
		&[disabled] {
			color: var(--krds-gray-50);
			cursor: default;
		}
	}
	li {
		flex-grow: 0;
	}
	&.full {
		width: 100%;
		.btn-tab {
			height: var(--#{$prefix}tab-h-full) !important;
			font-size: var(--#{$prefix}tab-fz-full) !important;
		}
		> ul {
			@include group-wrap;
			> li {
				@include equal-width;
			}
		}
	}
	&.fill {
		.btn-tab {
			height: var(--#{$prefix}tab-h-fill);
			padding: 0 var(--#{$prefix}tab-px-fill);
			font-size: var(--#{$prefix}tab-fz-fill);
		}
		.active {
			.btn-tab {
				background-color: var(--#{$prefix}secondary);
				border-color: var(--#{$prefix}secondary);
				color: var(--#{$prefix}white);
			}
		}
		> ul {
			> li {
				& + li {
					margin-left: var(--#{$prefix}tab-ml-fill);
				}
				.btn-tab {
					border-radius: var(--#{$prefix}tab-rd-fill);
				}
			}
		}
		&.full {
			.btn-tab {
				border: 1px solid var(--#{$prefix}secondary-20);
			}
			.active {
				.btn-tab {
					background-color: var(--#{$prefix}secondary);
					border-color: var(--#{$prefix}secondary);
					color: var(--#{$prefix}white);
				}
			}
			> ul {
				> li {
					& + li {
						margin-left: 0;
						.btn-tab {
							border-left: none;
						}
					}
					.btn-tab {
						border-radius: 0;
					}
					&:first-of-type {
						.btn-tab {
							border-top-left-radius: var(--#{$prefix}tab-rd-full);
							border-bottom-left-radius: var(--#{$prefix}tab-rd-full);
						}
					}
					&:last-of-type {
						.btn-tab {
							border-top-right-radius: var(--#{$prefix}tab-rd-full);
							border-bottom-right-radius: var(--#{$prefix}tab-rd-full);
						}
					}
				}
			}
		}
	}
	&.line {
		.btn-tab {
			height: var(--#{$prefix}tab-h-line);
			padding: 0 var(--#{$prefix}tab-px-line);
			font-size: var(--#{$prefix}tab-fz-line);
			&:before {
				@include position($b: 0, $l: 50%);
				@include pseudo();
				width: 0;
				height: .2rem;
				background-color: var(--#{$prefix}secondary);
				transition: $transition-base;
			}
		}
		.active {
			.btn-tab {
				color: var(--#{$prefix}secondary);
				&:before {
					@include position($l: 0);
					width: 100%;
				}
			}
		}
		> ul {
			> li {
				& + li {
					margin-left: var(--#{$prefix}tab-ml-line);
				}
			}
		}
		&.full {
			.btn-tab {
				padding-left:0;
				padding-right: 0;
				border: 0;
				border-bottom: 2px solid var(--#{$prefix}gray-30);
				&:before {
					bottom: -.2rem;
					height: .4rem;
				}
				&:hover,
				&:active {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}
			}
			> ul {
				> li {
					& + li {
						margin-left: 0;
					}
				}
			}
		}
	}
}

.tab-conts {
	display: none;
	margin-top: var(--#{$prefix}spacer-10);
	/*position: absolute;
	z-index: -1;
	opacity: 0;
	transition: $transition-fade;*/
	&.active {
		@include flex-layout($fd: column, $ai: normal);
		gap: var(--#{$prefix}spacer-10);
		/*position: relative;
		z-index: auto;
		opacity: 1;*/

	}
}

//mobile only
@include mobile {
	.tab-conts {
		margin-top: var(--#{$prefix}spacer-10);
		&.active {
			gap: var(--#{$prefix}spacer-8);
		}
	}
}