@use '../scss/_variables.scss' as *;

.adpresso-tab-nav {
	display: flex;
	width: 100%;
	position: relative;
	margin-bottom: 2em;
	gap: .4em;

	&__item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		outline: none;
		cursor: pointer;
		font-size: 1.5em;
		border-bottom: calc(0.4em / 1.5) solid $color-divider;
		padding: calc(2em / 1.5);

		&:focus-visible, &:hover {
			color: $color-text;
			border-bottom-color: $color-golden-brown-dark;
			box-shadow: none;
			outline: none;
		}

		&.is-active {
			color: $color-text;
			border-bottom-color: $color-accent;
		}
	}
}