import styled from 'styled-components';

export const GaugeSVG = styled.svg`
	height: 6rem;
	overflow: visible;
	width: 9rem;
`;
export const GaugeSVGArrow = styled.path`
	fill: #6a6a85;
	transform-origin: 50% 100%;
	transition: all 0.1s ease-out;
`;
export const GaugeSVGBase = styled.path`
	fill: blue;
`;
export const GaugeSVGSegment = styled.path``;
export const GaugeSVGFirstThird = styled.path`
	fill: #ce0d0d;
`;
export const GaugeSVGLastThird = styled.path`
	fill: #50b058;
`;
export const GaugeSVGMarker = styled.circle`
	stroke: #292e31;
	stroke-width: 0.01;
	transition: all 0.1s ease-out;
`;
export const GaugeSVGMidpoint = styled.line`
	stroke: #fff;
	stroke-width: 0.027;
`;