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

.edd-nav {
	&__wrapper {
		background-color: #fff;
		box-shadow: inset 0 -3px var(--edd-very-light-gray);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 10px -20px;
		padding: 0 20px;
		position: sticky;
		top: 32px;
		z-index: 30;

		@media screen and (max-width: wp-breakpoints.$break-medium) {
			top: auto;
			position: relative;
			justify-content: center;
			flex-wrap: wrap;

			.subtitle {
				padding: 18px 12px;
			}
		}
	}

	&__tabs {
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin: 0;
		gap: 8px;

		@media screen and (max-width: wp-breakpoints.$break-medium) {
			justify-content: center;
		}

		li {
			display: flex;
			align-items: flex-end;
			margin: 0;

			&:hover,
			&:focus {
				box-shadow: inset 0 -3px colors.$wp-gray-20;
			}

			&.active {
				color: var(--edd-light-blue);
				box-shadow: inset 0 -3px var(--edd-light-blue);
			}
		}

		a.tab {
			border-bottom: none;
			box-shadow: none;
			outline: none;
			display: block;
			text-decoration: none;
			color: colors.$wp-gray-50;
			padding: 18px 20px;
			font-weight: 600;
			font-size: 16px;
			text-align: center;
			white-space: nowrap;
		}
	}
}

.edd-admin-page #wpbody-content > .notice:not(.inline):not(.edd-notice) {
	display: none;
	margin-left: 0;
}