@import "../../stylesheets/_variables.scss";

.woocommerce-marketplace {
	&__tabs {
		box-sizing: content-box;
		display: flex;
		gap: 24px;
		overflow-y: auto;
	}

	&__tab-button {
		border-bottom: 1.5px solid transparent;
		border-radius: 0;
		color: $mauve-light-12;
		font-size: 13px;
		font-style: normal;
		font-weight: 600;
		height: 48px;
		line-height: 16px;
		padding: 0;
		white-space: nowrap;

		&:focus:not(:disabled) {
			box-shadow: none;
		}

		&.is-active {
			border-color: var(--wp-admin-theme-color);
		}
	}

	&__update-count {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		margin: 1px 0 -1px 4px;
		padding: 0 5px;
		min-width: 16px;
		height: 16px;
		border-radius: 9px;
		background-color: #d63638;
		color: #fff;
		font-size: 10px;
		line-height: 1.6;
		text-align: center;
		z-index: 26;
	}
}

@media (width <= $breakpoint-medium) {
	.woocommerce-marketplace__tabs {
		border-bottom: 1px solid $gutenberg-gray-300;

		&::after {
			content: "";
			position: fixed;
			right: 0;
			width: 4.5em;
			height: 48px;
			background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 1) 100%);
			pointer-events: none;
		}

		.woocommerce-marketplace__tab-my-subscriptions {
			padding-right: 2.5em;
		}
	}
}