#tabs-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	padding: 25px 0 0 32px;
	margin-bottom: 24px;

	.scroll-arrow {
		display: none;
	}
}

#tabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: start;
	overflow-x: scroll;
	cursor: grab;
	gap: 4px;
	touch-action: pan-y;
	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}

	a {
		color: var(--text-link);
		white-space: nowrap;
		border-radius: 4px;
		flex-shrink: 0;
		padding: 0 12px 0 0;
		-webkit-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-webkit-tap-highlight-color: transparent;
		outline: none;

		&:hover {
			color: var(--brand-orange);
			text-decoration: underline;
		}

		&.active {
			color: var(--brand-orange);
			font-weight: 600;
		}
	}
}

@media (max-width: 576px) {
	#tabs-wrapper {
		padding: 15px 0 0 0;
		margin-bottom: 0;
		gap: 0;

		.scroll-arrow {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 28px;
			height: 28px;
			border: none;
			background: transparent;
			color: var(--text-secondary);
			font-size: 0.75rem;
			cursor: pointer;

			&:active {
				color: var(--brand-orange);
			}
		}
	}

	#tabs {
		flex: 1;
		min-width: 0;
	}

	main {
		#changeApprove, #changeEmail, #changeIntro, #changeName, #changePassword,
		#changeSummary, #changeThumb, #profile, #verifyEmail, #withdraw, #loginLog,
		#myPosts, #myComments, #expLogs {
			padding: 15px 10px 22px 10px;
		}
	}
}