/**
 * External dependencies
 */
import styled from '@emotion/styled';

/**
 * WordPress dependencies
 */
import { Card, CardBody } from '@wordpress/components';

/**
 * SolidWP dependencies
 */
import { Heading, MessageList } from '@ithemes/ui';
import { Markup } from '@ithemes/security-ui';

export const StyledCardContainer = styled.div`
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(min(800px, 100%), 1fr) );
	gap: 2rem;
	margin-top: 1rem;
`;

export const StyledToolContainer = styled( Card )`
	display: flex;
	flex-direction: column;
	margin-bottom: 0.75rem;
	box-shadow: none !important;
	border: 1px solid ${ ( { theme } ) => theme.colors.border.normal };
	> div:first-child {
		display: flex;
		flex-direction: column;
	}
`;

export const StyledToolHeading = styled( Heading )`
	font-size: 0.875rem;
`;

export const StyledCardBody = styled( CardBody )`
	flex-grow: 2;
	display: flex;
	flex-direction: column;
`;

export const StyledTextContainer = styled.div`
	width: 90%;
`;

export const StyledHelpText = styled( Markup )`
	font-size: 0.75rem;
	color: ${ ( { theme } ) => theme.colors.text.muted };
`;

export const StyledInputContainer = styled.div`
	flex: 0 0 90%;
`;

export const StyledToolActionContainer = styled.div`
	display: flex;
	margin-top: auto;
	@media screen and (min-width: ${ ( { theme } ) => theme.breaks.medium }px) {
		flex-direction: ${ ( { hasMessage } ) => hasMessage ? 'column' : 'row' };
	}
`;

export const StyledToolActionMessage = styled( MessageList )`
	margin: 0.5rem 0;
`;
