import styled from "styled-components";

const Box = styled.div<{ $color: string }>`
	position: fixed;
	outline: 2px solid ${(p) => p.$color};
	z-index: 1001;
	pointer-events: none;
`;

const Label = styled.span<{ $color: string; $above?: boolean }>`
	position: absolute;
	background-color: ${(p) => p.$color};
	color: ${(p) => p.theme.colors.textHighEmphasis};
	${(p) => p.theme.textStyle.uiS};
	padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
	font-family: Source Sans Pro;
	font-style: normal;
	text-decoration: none;

	${(p) =>
		p.$above
			? `
		transform: none;
		top: -20px;
		left: -2px;
	`
			: `
		transform: rotate(-90deg);
		top: 1px;
		left: -23px;
	`}
`;

export { Box, Label };
