@use 'variables';

.ss-tabs {
	background: #fff;
	border: var(--ss-border);
	border-radius: 6px;
}

.ss-content>.ss-tabs {
	margin: 0;
}

.ss-tab-list {
	border-bottom: var(--ss-border);
	display: flex;
	align-items: center;
	gap: 24px;
}

.ss-tab {
	display: inline-block;
	padding-block: 18px;
	font-weight: 500;
	transition: box-shadow .1s linear;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;

	&:hover {
		color: var(--ss-color-primary);
	}

	&.ss-is-active {
		box-shadow: inset 0 0 0 1.5px transparent, inset 0 -3.5px 0 0 currentColor;
		color: var(--ss-color-primary);
	}
}

.ss-tab-pane {
	display: none;
	padding-block: 24px;

	&.ss-is-active {
		display: block;
	}

	> :first-child {
		margin-top: 0;
	}

	> .submit.submit {
		margin-inline: -24px;
		padding: 24px 24px 0 24px;
		border-top: var(--ss-border-lighter);
	}
}

// Add inline padding to tabs and panes in settings page.
.settings_page_slim-seo {
	.ss-tab-list {
		padding-inline: 24px;
	}

	.ss-tab-pane {
		padding-inline: 24px;
	}
}