@import "@wordpress/base-styles/breakpoints";
@import "@automattic/components/src/styles/typography";

$stats-utm-popover-min-width: 270px;
$stats-utm-border: 1px solid var(--gray-gray-5, #dcdcde);

.stats-utm-picker {
	> .components-button {
		align-items: center;
		background: #fff;
		border: 1px solid var(--gray-gray-10, #c3c4c7);
		border-radius: 4px;
		color: var(--studio-black);
		display: flex;
		font-family: $font-sf-pro-display;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		gap: 8px;
		justify-content: flex-end;
		line-height: 20px;
		padding: 12px 10px;
	}
}

.stats-utm-picker__popover-wrapper {
	min-width: $stats-utm-popover-min-width;
}

.stats-utm-picker__popover-list {
	padding: 8px 0;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
}

.stats-utm-picker__popover-list-item {
	display: flex;
	flex-direction: column; // allow for a divider line between grouped items
	min-width: $stats-utm-popover-min-width;

	&:hover {
		.components-button {
			background-color: var(--color-primary-0);
		}
	}

	& + & {
		margin-top: 2px; // space for an outline for the current item and hover for the next
	}

	&.is-selected {
		.components-button {
			background-color: var(--color-accent-5);
		}
	}

	.components-button {
		margin: 2px 10px; // 10px 10px for the first and the last item (8 + 2)
		display: flex;
		justify-content: space-between;
		border-radius: 4px;
		min-height: 36px;
		flex: 1; // take full width
	}

	&.is-grouped + &.is-not-grouped {
		&::before {
			content: "";
			margin: 2px 0;
			display: block;
			border-top: $stats-utm-border;
		}
	}
}
