@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

.plugin-details-v2 {
	padding: 0 16px;

	p {
		font-size: inherit;
	}

	.plugin-details-v2__top-container {
		max-width: 1500px;
		margin: auto;
	}

	.plugin-details-v2__body-container {
		padding-block-start: 0;
		background: var( --color-surface );
		margin: 32px -180px -32px;
		padding: 0 180px;

		@include break-xlarge {
			margin-top: 72px;
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		padding: 0;
	}

	@include break-xlarge {
		padding: 0 38px;
	}

	.plugin-details-sidebar__plugin-details-content {
		border: none;
		margin: 0;
		padding: 0;
	}

	.current-section button {
		padding: 12px 8px !important;
	}

	.plugin-ratings__rating-stars {
		display: flex;
		margin: 10px 0;

		@include breakpoint-deprecated( '>660px' ) {
			margin: 0;
		}
	}

	.plugin-details__page {
		padding: 0;

		@include breakpoint-deprecated( '>660px' ) {
			padding: 30px 0 0;
		}
	}

	.plugin-details__body {
		padding-top: 0;
		max-width: 1500px;
		margin: auto;

		.section-nav-tabs__list {
			box-shadow: none;
		}

		.plugin-details__layout-col-left {
			padding-block-start: 12px;

			@include break-xlarge {
				padding-block-start: 48px;
			}

			.section-nav__mobile-header {
				padding: 10px 0;
			}

			.section-nav-tab {
				&:first-child .section-nav-tab__link {
					padding: 8px 8px 12px;

					@include breakpoint-deprecated( '>660px' ) {
						padding-left: 0;
					}
				}

				&.is-selected .section-nav-tab__link {
					color: var( --color-text-inverted );

					.section-nav-tab__text {
						padding-bottom: 0;
						font-weight: 500;
						border-bottom: none;
					}

					@include breakpoint-deprecated( '>660px' ) {
						color: initial;
					}
				}
			}
		}
	}
}

.plugin-details-v2__header {
	border-bottom: none !important;
	background-color: var( --color-surface-backdrop ) !important;

	@include breakpoint-deprecated( '>660px' ) {
		inset-inline-start: calc( var( --sidebar-width-min ) + 1px ) !important;
		padding-inline-start: 24px !important;
	}

	@include break-large {
		inset-inline-start: calc( var( --sidebar-width-min ) + 45px ) !important;
		padding-inline-start: 39px !important;
	}

	@include break-xlarge {
		padding-inline-start: 70px !important;

		> div {
			max-width: 1530px;
			margin: auto;
		}
	}
}

.plugin-details-v2__title {
	font-size: 0.875rem;
	color: var( --color-text );
}

.plugin-details-v2__sites-list {
	border: 1px solid var( --studio-gray-10 );
	border-radius: 8px;
	padding-block-end: 8px;

	&.separators-top-bottom {
		margin-top: 16px;
		margin-bottom: 16px;
	}

	.dataviews-view-table tr {
		th:last-child {
			text-align: right;
		}

		td:first-child .dataviews-view-table__cell-content-wrapper > span {
			flex-grow: 1;
		}

		td:last-child .dataviews-view-table__cell-content-wrapper {
			justify-content: flex-end;
		}
	}

	.plugin-row-formatter__overlay {
		display: none;
	}

	.dataviews-view-list {
		// Hiding this here because in this version the mediaField is not hiddable
		// https://github.com/WordPress/gutenberg/tree/d59faffa3d270dbc7716f653b4cdab6020812658/packages/dataviews#properties-of-layout
		// In future versions, a showMedia property can be used
		.dataviews-view-list__media-wrapper {
			background-color: transparent;
			display: none;
		}
		.dataviews-view-list__field-wrapper {
			width: 100%;
			.dataviews-view-list__field:last-child {
				margin-left: auto;
				order: 0;
			}
		}
	}
}
