@import '@automattic/typography/styles/variables';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

.is-section-themes {
	&.theme-default.color-scheme {
		--color-surface-backdrop: var( --studio-white );
	}

	&.is-global-sidebar-visible {
		.layout__content {
			min-height: 100vh;
			@media screen and ( min-width: 782px ) {
				padding: calc( var( --masterbar-height ) + var( --content-padding-top ) ) 16px
					var( --content-padding-bottom ) var( --sidebar-width-max );
			}
		}

		.layout__primary > * {
			background-color: var( --color-surface );
			border-radius: 8px;
			height: calc(
				100vh - var( --masterbar-height ) - var( --content-padding-top ) - var(
						--content-padding-bottom
					)
			);
			max-width: none;
			padding-bottom: 0;

			@include break-small {
				border: 1px solid $gray-200;
			}

			@media ( max-width: $break-mobile ), ( max-height: $break-mobile ) {
				overflow-y: auto;
				overflow-x: hidden;
			}
		}

		.theme-showcase {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		.themes__header-navigation-container {
			@media ( min-width: $break-small ) {
				border-block-end: 1px solid var( --color-neutral-5 );
			}
		}
		.navigation-header {
			padding-block: 16px;
			padding-inline: 24px;
			@media ( max-width: 402px ) {
				padding-inline: 24px;
			}

			.navigation-header__main {
				align-items: center;
				height: 40px;
			}

			.formatted-header__title {
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 1.25;
				letter-spacing: -0.5px;
			}

			.formatted-header__subtitle {
				display: none;
			}
		}

		.themes__content {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			margin-top: 16px;
			min-height: 0;
			@media ( max-width: $break-small ) {
				margin-top: 10px;
			}
			.themes__showcase {
				flex-grow: 1;
				min-height: 0;
			}
			.themes__controls,
			.themes__showcase {
				@media ( max-width: $break-small ) {
					padding: 0;
				}
			}

			.theme-showcase__all-themes {
				@media ( min-width: $break-mobile ) and ( min-height: $break-mobile ) {
					overflow-y: auto;
					overflow-x: hidden;
				}
				height: 100%;
			}

			.themes__controls .theme__search-container,
			.themes__controls .themes__filters,
			.themes__showcase .theme-showcase__all-themes {
				margin: 0 auto;
				padding-inline: 24px;
				@media ( max-width: 402px ) {
					padding-inline: 24px;
				}
				box-sizing: border-box;
			}
		}
	}

	.main > .calypso-notice.is-error {
		margin-top: 24px;
		margin-bottom: 0;
	}
}

.is-logged-out {
	.themes__header-logged-out::before,
	.themes__controls::before {
		background-color: #e5f4ff;
		content: '';
		left: 0;
		height: 100%;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}

	.themes__header-logged-out {
		padding: 88px 16px 8px;
		border: none;
		margin: 0;
		position: relative;

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

		h1 {
			color: var( --studio-blue-50 );
			font-family: Recoleta, 'Noto Serif', Georgia, 'Times New Roman', Times, serif;
			font-size: 2.75rem;
			line-height: 1.15;
			margin-bottom: 15px;
		}

		.page-sub-header {
			line-height: 26px;
			margin-bottom: 8px;
			max-width: 680px;
		}
	}

	.themes__content {
		position: relative;

		.themes__controls,
		.themes__showcase {
			padding: 0 16px;
			position: relative;

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

		.theme__search {
			.theme__search-input {
				.components-input-control__container {
					background-color: #fff;
				}

				.components-input-base {
					height: 55px;
				}
			}

			.theme__tier-select {
				.components-input-control__container {
					height: 55px;
				}
			}
		}
	}

	.search-themes-card {
		background: none;

		&.is-suggestions-open {
			max-width: 100%;
		}

		.search {
			border: none;
			box-shadow:
				0 0 0 0 rgba( 38, 19, 19, 0.03 ),
				0 1px 2px 0 rgba( 38, 19, 19, 0.03 ),
				0 4px 4px 0 rgba( 38, 19, 19, 0.03 ),
				0 9px 5px 0 rgba( 38, 19, 19, 0.02 ),
				0 16px 6px 0 rgba( 38, 19, 19, 0 ),
				0 25px 7px 0 rgba( 38, 19, 19, 0 );
			margin: 0;
			height: 55px;
			border-radius: 4px;

			.search__icon-navigation {
				border-bottom-right-radius: 0;
				border-top-right-radius: 0;
			}

			.search__input {
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
			}
		}

		.keyed-suggestions__category {
			background-color: var( --studio-blue-5 );
		}

		.keyed-suggestions__value.is-selected {
			background-color: color-mix( in srgb, var( --studio-blue ) 10%, transparent );
		}
	}

	.themes-toolbar-group.responsive-toolbar-group__dropdown,
	.themes-toolbar-group.responsive-toolbar-group__swipe {
		.responsive-toolbar-group__full-list,
		.responsive-toolbar-group__swipe-list,
		.responsive-toolbar-group__grouped-list {
			@include break-large {
				justify-content: flex-start;
			}
		}
	}

	.themes-toolbar-group.responsive-toolbar-group__dropdown .components-toolbar .components-button,
	.themes-toolbar-group.responsive-toolbar-group__swipe .components-toolbar .components-button {
		&:not( .is-pressed ) {
			color: var( --studio-blue-90 );

			&::before {
				background-color: transparent;
			}

			&:hover::before {
				background-color: color-mix( in srgb, var( --studio-blue ) 10%, transparent );
			}
		}

		&.is-pressed {
			color: var( --color-text-inverted );

			&::before {
				background-color: var( --studio-blue-50 );
			}
		}

		&.is-selected {
			background-color: var( --studio-blue-50 );
			color: var( --color-text-inverted );
		}
	}

	.theme__search {
		@include break-mobile {
			width: 100%;
		}

		@include break-small {
			width: 75%;
		}

		@include break-medium {
			width: 70%;
		}

		@include break-large {
			width: 60%;
		}

		@include break-xlarge {
			width: 50%;
		}

		.section-nav-tabs__dropdown {
			min-width: 140px;

			box-shadow:
				0 0 0 0 rgba( 38, 19, 19, 0.03 ),
				0 1px 2px 0 rgba( 38, 19, 19, 0.03 ),
				0 4px 4px 0 rgba( 38, 19, 19, 0.03 ),
				0 9px 5px 0 rgba( 38, 19, 19, 0.02 ),
				0 16px 6px 0 rgba( 38, 19, 19, 0 ),
				0 25px 7px 0 rgba( 38, 19, 19, 0 );

			&.select-dropdown {
				border-radius: 4px;
				height: 55px;
			}

			&.is-open {
				.select-dropdown__header {
					border-radius: 4px;
				}
			}

			.select-dropdown__header {
				border-width: 0;
				color: #575d63;
				height: 55px;
				line-height: 1.5;
			}

			.is-selected {
				color: var( --color-text-inverted );
				background-color: var( --color-neutral-80 );
			}

			.select-dropdown__option:hover {
				background: var( --studio-gray-0 );
			}

			.select-dropdown__item:not( .is-selected ):hover {
				color: var( --studio-blue-90 );
				background-color: color-mix( in srgb, var( --studio-blue ) 10%, transparent );
			}
		}
	}

	.themes__filters {
		margin-top: 50px;
		padding-bottom: 25px;
		padding-left: 1px;
	}
}

.is-logged-in {
	.theme-showcase .theme__search {
		@include break-xlarge {
			width: 680px;
		}
	}
}

.search-themes-card {
	.search {
		height: 43px;
		border-radius: 2px;
	}
}

.theme-showcase {
	.navigation-header {
		@media ( max-width: $break-small ) {
			padding-bottom: 16px;
		}
	}

	.theme__search {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;

		@include break-mobile {
			flex-direction: row;
		}

		.select-dropdown__header {
			font-weight: 400;
		}

		.select-dropdown__options {
			position: absolute;
			width: 100%;

			@include break-mobile {
				position: inherit;
			}
		}

		.section-nav-tabs__dropdown .select-dropdown__container {
			width: 100%;
		}

		.theme__search-input {
			width: 100%;
			padding: 0 0 10px 0;

			@include break-mobile {
				padding: 0 10px 0 0;
			}
		}

		.section-nav-tabs__dropdown {
			width: 100%;
			flex-shrink: 0;

			@include break-mobile {
				width: auto;
			}

			.is-selected {
				background-color: var( --studio-blue-50 );
			}
		}
	}

	.themes-toolbar-group {
		margin: 0;
		width: 100%;
	}

	.themes__showcase {
		margin-top: 32px;
	}

	.themes__selection .themes-list {
		margin: 0 -16px;
	}

	.themes__install-theme-button-container {
		margin: 0;

		.button {
			border-radius: 4px;
			box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
			box-sizing: border-box;
			color: var( --color-neutral-100 );
			display: block;
			font-size: 0.875rem;
			line-height: 20px;
			padding: 8px 16px;
			white-space: nowrap;
		}
	}

	.theme__tier-select {
		min-width: 220px;
		width: 220px;

		@media ( max-width: $break-small ) {
			width: 100%;
			min-width: auto;
		}

		.components-custom-select-control__item.is-selected {
			background-color: var( --wp-components-color-gray-300, #ddd );
		}
	}
}

.themes:not( .is-logged-out ) {
	.theme-showcase {
		.theme__search {
			.section-nav-tabs__dropdown {
				.is-selected {
					color: var( --color-text-inverted );
					background-color: var( --color-neutral-80 );
				}

				.select-dropdown__item:not( .is-selected ):hover {
					color: var( --color-neutral-60 );
					background-color: var( --studio-gray-0 );
				}
			}
		}
	}
}

.popover__menu {
	.popover__menu-item:hover,
	.popover__menu-item:focus,
	.popover__menu-item:active {
		color: var( --color-neutral-60 );
		background-color: var( --studio-gray-0 );
	}
}

.themes__upload-button {
	float: right;

	&.is-compact {
		margin-top: 23px;
		color: var( --color-neutral-70 );
		.gridicon {
			padding-right: 4px;
		}

		@include breakpoint-deprecated( '<660px' ) {
			margin-top: 24px;
			margin-right: 15px;
		}

		@include breakpoint-deprecated( '<480px' ) {
			font-size: 0;
			.gridicon {
				padding: 0;
				margin-right: 0;
			}
		}
	}
}

.themes__content {
	min-height: 100vh;

	.themes__controls,
	.themes__showcase {
		@media ( max-width: $break-small ) {
			padding: 0 16px;
		}
	}

	.themes__controls.is-sticky:not( .is-global-sidebar-visible ) {
		@include break-medium {
			position: fixed;
			left: var( --sidebar-width-max );
			top: var( --masterbar-height );
			width: calc( 100vw - var( --sidebar-width-max ) - 16px );
			padding: 24px 32px 8px 33px;
			border-bottom: 1px solid var( --studio-gray-5 );
			box-sizing: border-box;
			background: var( --studio-white );
			z-index: 20;

			.is-global-sidebar-visible & {
				border-bottom: initial;
				position: static;
				width: auto;
				padding: 0;
			}
		}
	}

	.themes__controls-placeholder {
		.is-logged-out & {
			display: none;
		}

		@include break-medium {
			padding-top: 16px;
			margin-top: -16px;
			box-sizing: content-box;

			.is-global-sidebar-visible & {
				padding-top: 16px;
				margin-top: -16px;
				&.is-sticky {
					height: auto;
				}
			}

			&.is-sticky {
				height: 101px;
			}
		}
	}
}

.theme-showcase__open-showcase-button-holder {
	margin: 20px 0;
	display: flex;
	justify-content: center;
	width: 100%;
	hr {
		width: 50%;
	}
	button {
		margin-bottom: 200px;
	}
}

.themes__hidden-content {
	display: none;
}

.section-nav.themes__section-nav {
	box-shadow: none;
	border: 1px solid var( --color-border-subtle );
	border-top: 0;
	.section-nav-tab__link {
		@include breakpoint-deprecated( '>480px' ) {
			height: 60px;
			line-height: 36px;
			padding: 12px;
		}
	}
}

.themes__filters {
	align-items: center;
	display: flex;
	gap: 10px;
	height: 40px;
	justify-content: space-between;
	margin: 8px 0;

	&.is-woo-express {
		.responsive-toolbar-group__grouped-list {
			justify-content: flex-start;
		}
	}
}

.theme-showcase__all-themes-title {
	font-weight: 600;
}

.theme-showcase__all-themes-title,
.theme-showcase__all-themes-description {
	margin-left: 16px;
	margin-right: 16px;

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

.section-nav__mobile-header-text .theme-showcase__badge-beta,
.section-nav-tab__text .theme-showcase__badge-beta {
	margin-left: 6px;
}
