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

.edd-sub-nav {
	margin: 0;
	display: flex;
	justify-content: flex-start;
	gap: 4px;
	flex-wrap: wrap;

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

	&__wrapper {
		margin: 16px 0;
	}

	li {
		border: 2px solid #f0f0f1;
		border-radius: 4px;
		margin: 0;

		a {
			color: colors.$wp-gray-50;
			display: block;
			padding: 6px 14px;
			text-decoration: none;
			white-space: nowrap;

			&:active,
			&:focus {
				box-shadow: none;
			}
		}

		&:hover,
		&:active,
		&:focus {
			background-color: #fff;
			box-shadow: none;
			outline: none;
			border-color: colors.$wp-gray-20;
		}

		&.current {
			background-color: #d7dade;
			font-weight: 600;
		}
	}
}