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

.stats-interval-dropdown,
.stats-interval-dropdown__container {

	font-style: normal;
	--gray-gray-10: #c3c4c7;
	--gutenberg-gray-900: #1e1e1e;
	background: #fff;
	color: var(--studio-black);
	font-family: $font-sf-pro-text;
	font-size: 13px;
	font-weight: 400;

	>.components-button[aria-expanded="true"],
	.components-button:hover {
		color: var(--gutenberg-gray-900);
	}

	>.components-button {
		border-radius: 4px;
		border: 1px solid var(--gray-gray-10);
		width: 146px;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}
}

.is-section-stats {
	.components-popover__content {
		border-radius: 4px;
		padding: 16px;
	}
}

.stats-interval-dropdown__container {
	position: relative;
	width: 196px;
}

.stats-interval-dropdown-listing__list {
	list-style: none;
	margin: 0;
}

.stats-interval-dropdown-listing__interval {
	border-radius: 2px;
	.components-button {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	&:hover {
		background-color: var(--color-primary-0);
	}
	& + & {
		// Prevent overlap between outline and hover.
		margin-top: 2px;
	}
	&.is-selected {
		background-color: var(--color-accent-5);
	}
}

// Mimic the style of Button component.
.stats-interval-display {
	font-family: $font-sf-pro-text;
	font-size: 13px;
	font-weight: 400;
	line-height: 36px;
}
