@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.site-picker__wrapper.card {
	padding: 0;
	.site-selector {
		overflow: auto;
	}
}

.site-picker__wrapper {
	width: 320px;
}

body.is-section-signup {
	.site-picker__wrapper {
		width: 600px;
		max-width: 100%;
		padding: 0 16px;
		@include break-mobile {
			padding: 0;
		}
		.search-component.is-open {
			border: 1px solid #a7aaad;
			border-radius: 4px;
			height: 48px;
			box-sizing: border-box;
		}
		.search-component.is-open.has-focus {
			border-color: #646970;
			background: var(--color-surface);
			box-shadow: none;
			.search-component__input {
				background: var(--color-surface);
			}
		}
		.search-component.is-open .search-component__input-fade.ltr::before {
			display: none;
		}
		.search-component__open-icon {
			transform: scaleX(-1);
		}
		.search-component__icon-navigation.components-button:focus:not(:disabled) {
			box-shadow: 0 0 0 1px var(--color-neutral-60);
		}
		.search-component input.search-component__input[type="search"] {
			background: none;
		}
		.search-component.is-open .search-component__input-fade::before {
			display: none;
		}
		.search-component__icon-search {
			fill: #a7aaad;
			margin: 8px 6px 8px 8px;
		}
		.search-component .search-component__icon-navigation {
			padding: 0 7px;
		}
		&.card {
			box-shadow: none;
			background: none;
		}
		.site-selector.is-large .site-selector__sites {
			border-top: none;
			background: none;
			margin-top: 24px;
		}
		.site-selector {
			.site {
				border: solid 1px var(--color-neutral-5);
				border-radius: 4px;
				margin-bottom: 16px;
			}
		}
		.site__title::after,
		.site__domain::after {
			display: none;
		}
	}
	.is-site-picker {
		.site {
			.site__info {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			.site__title {
				font-size: $font-title-medium;
				margin-right: 6px;
				color: var(--color-neutral-100);
			}
			.site__domain {
				width: 100%;
				color: var(--color-neutral-60);
			}
			.site__badge {
				border-radius: 4px;
				margin-top: 0;
			}
			.site-icon {
				margin-right: 16px;
			}
		}
	}
}
