one-click-accessibility/modules/settings/assets/js/pages/assistant/stats/stats.styles.js

import Box from '@elementor/ui/Box';
import Typography from '@elementor/ui/Typography';
import { styled } from '@elementor/ui/styles';

export const StyledStatsItem = styled(Box)`
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: ${({ theme }) => theme.spacing(2, 2.5)};

	border: 1px solid ${({ theme }) => theme.palette.divider};
	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
	background: ${({ theme }) => theme.palette.background.default};

	:nth-of-type(1) {
		grid-area: 1 / 1 / 2 / 2;
	}

	:nth-of-type(2) {
		grid-area: 1 / 2 / 2 / 3;
	}

	:nth-of-type(3) {
		grid-area: 2 / 1 / 3 / 3;
	}

	:nth-of-type(4) {
		grid-area: 1 / 3 / 3 / 4;
	}

	@media screen and (max-width: 960px) {
		:nth-of-type(1) {
			grid-area: 1 / 1 / 2 / 2;
		}

		:nth-of-type(2) {
			grid-area: 2 / 1 / 3 / 2;
		}

		:nth-of-type(3) {
			grid-area: 3 / 1 / 4 / 2;
		}

		:nth-of-type(4) {
			grid-area: 4 / 1 / 5 / 2;
		}
	}
`;

export const StyledStatsItemContent = styled(Box)`
	min-width: 150px;
	min-height: 50px;
	align-self: start;
`;

export const StyledStatsItemChart = styled(Box)`
	@media screen and (max-width: 1200px) {
		& {
			display: none;
		}
	}
`;

export const StyledStatsItemTitle = styled(Typography, {
	shouldForwardProp: (prop) => prop !== 'spacing',
})`
	display: flex;
	justify-content: flex-start;
	align-items: center;

	margin: 0;
	margin-block-end: ${({ spacing, theme }) => theme.spacing(spacing || 2)};

	color: ${({ theme }) => theme.palette.text.primary};
	font-feature-settings:
		'liga' off,
		'clig' off;
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 0.15px;

	& svg {
		margin-inline-start: ${({ theme }) => theme.spacing(1)};
	}
`;