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


// This file is meant to house style rules that all implementations of the base
// sidebar will implement by default.

.jetpack-cloud-sidebar {
	.jetpack-cloud-sidebar__site-selector {
		background-color: var(--color-sidebar-background);
		.components-button {
			border: none;
		}
		.search-component.is-open.has-focus {
			box-sizing: border-box;
			border: 2px solid var(--studio-jetpack-green-50);
			box-shadow: none; // Use border instead of box-shadow to avoid hiding the shadow at 100% width
		}
		.search-component__input{
			width: 100%;
		}
	}


	.split-button {
		display: flex;

		a {
			flex-grow: 1;
		}

		button.split-button__toggle {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}


	.sidebar-v2__menu-item {
		svg {
			color: #6f6f6f;
		}
		&.is-active {
			background: var(--studio-green-0);
			color: var(--studio-green-50);

			svg {
				color: var(--studio-green-50);
			}
		}
	}

	.sidebar__menu-icon {
		margin: 0;
	}
}

.jetpack-cloud-sidebar__header {
	display: flex;
	align-items: center;
	padding: 16px 8px;
	gap: 12px;

	.all-sites:hover {
		background-color: unset;
	}

	.all-sites .all-sites__content,
	.site .site__content {
		padding: initial;
		align-items: center;

		cursor: pointer;

		.all-sites__icon-container,
		.site-icon {
			border-radius: 2px;
			margin-inline-end: 12px;
		}
	}

	.site__domain {
		display: none;
	}

	.site__title {
		// TODO: Value taken directly from designs;
		// confirm this weight is correct and refactor as necessary
		font-weight: 500;
	}
}

.jetpack-cloud-sidebar__guided-tour {
	display: none;

	@include break-medium {
		display: block;
	}
}

.jetpack-cloud-sidebar__footer ul {
	list-style: none;
	margin: 0;
}
