/**
 * Tabbed Navigation
 */

@use "~@wordpress/base-styles/colors" as wp-colors;

.newspack-tabbed-navigation {
	background: white;
	width: 100%;

	@media only screen and ( min-width: 600px ) {
		position: sticky;
		top: 46px;
		z-index: 3;
	}

	@media only screen and ( min-width: 783px ) {
		top: 32px;
	}

	ul {
		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
	}

	li {
		margin-bottom: 0;
		width: 100%;

		@media screen and ( min-width: 600px ) {
			width: auto;
		}

		a {
			align-items: center;
			color: wp-colors.$gray-900;
			display: flex;
			font-weight: bold;
			height: 48px;
			outline: none;
			padding: 12px 15px;
			text-decoration: none;

			@media screen and ( min-width: 600px ) {
				border-bottom: 4px solid transparent;
				padding-bottom: 8px;
			}

			&:active,
			&:focus,
			&:hover {
				color: var(--wp-admin-theme-color);
			}

			&:focus-visible {
				outline: 2px solid var(--wp-admin-theme-color);
				outline-offset: -2px;
			}

			&.selected {
				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var(--wp-admin-theme-color);

				@media screen and ( min-width: 600px ) {
					border-color: var(--wp-admin-theme-color);
					box-shadow: none;
				}
			}

			&.disabled {
				cursor: not-allowed;
				opacity: 0.3;
				pointer-events: none;

				&:hover {
					color: inherit;
				}
			}
		}
	}
}