import styled, { css } from 'styled-components';
import { IconButton } from '@strapi/design-system';

export const ActiveButton = styled(IconButton)`
	font-size: ${20 / 16}em;
	padding: ${4 / 16}em;

	svg {
		width: auto;
		height: auto;
	}

	svg path:not([fill='none']) {
		fill: inherit !important;
	}

	svg path[fill='none'] {
		fill: none !important;
	}

	${({ theme, active }) =>
		active &&
		css`
			background-color: ${theme.colors.primary100};
			color: ${theme.colors.buttonPrimary600};
		`}
`;

export const DropdownContainer = styled.div`
	position: relative;
`;

export const DropdownMenu = styled.div`
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background-color: white;
	border: 1px solid #ccc;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
`;