@import "_variables";
@import "_mixins";

ul.package-manager-selector {
	display: flex;
	padding: 0;
	margin: 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-shadow: inset 0 0 0 1px var(--sl-color-bg);
	background-color: var(--sl-color-bg-nav);
	border-bottom: none;
	line-height: 45px;

	@media only screen and (max-width: var(--mobile-breakpoint)) {
		border-radius: 0;
		margin: 0 -20px;
		padding: 0 10px;
	}
}

pre.package-manager-command {
	display: none;
	position: relative;

	padding: 0;
	background-color: transparent;
	border: none;

	&.active {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

ul.package-manager-selector {
	li {
		padding: 0 10px;
		list-style: none;
		cursor: pointer;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		svg {
			vertical-align: middle;
			height: 16px;
			width: 16px;
			margin-right: 4px;
		}

		&.active {
			font-weight: bold;
			border-bottom: 2px solid black;

			:root[data-theme="dark"] & {
				border-color: white;
			}

			@media (prefers-color-scheme: dark) {
				:root[data-theme="auto"] & {
					border-color: white;
				}
			}
		}
	}
}
