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

export const Wrapper = styled(Box)`
	${({ hasError }) =>
		hasError &&
		css`
			outline: 1px solid ${({ theme }) => theme.colors.danger600};
		`}

	&:focus-within {
		outline: 2px solid ${({ theme }) => theme.colors.primary600};
		outline-offset: 2px;
	}

	background-color: ${({ theme }) => theme.colors.neutral0};
	color: ${({ theme }) => theme.colors.neutral800};

	&,
	+ * {
		margin-top: ${8 / 16}em;
	}

	.ProseMirror {
		padding: ${16 / 16}em;
		border: 1px solid ${({ theme }) => theme.colors.neutral200};
		font-size: ${14 / 16}em;
		min-height: ${300 / 16}em;
		overflow: auto;
		resize: vertical;
		outline: none;

		> * + * {
			margin-top: 0.75em;
		}

		ul,
		ol {
			padding: 0 1rem;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			line-height: 1.1;
		}

		h1 {
			font-weight: 700;
			font-size: 2em;
		}

		h2 {
			font-weight: 700;
			font-size: 1.75em;
		}

		h3 {
			font-weight: 700;
			font-size: 1.5em;
		}

		h4 {
			font-weight: 700;
			font-size: 1.25em;
		}

		h5 {
			font-weight: 700;
			font-size: 1.125em;
		}

		h6 {
			font-weight: 700;
			font-size: 1em;
		}

		pre {
			background: #0d0d0d;
			color: #fff;
			font-family: 'JetBrainsMono', monospace;
			padding: 0.75rem 1rem;
			border-radius: 0.5rem;

			code {
				color: inherit;
				padding: 0;
				background: none;
				font-size: 0.8rem;
				border: 0;
			}
		}

		img {
			max-width: 100%;
			height: auto;
		}

		blockquote {
			padding-left: 1rem;
			border-left: 2px solid rgba(#0d0d0d, 0.1);
		}

		hr {
			border: none;
			border-top: 2px solid rgba(#0d0d0d, 0.1);
			margin: 2rem 0;
		}

		i,
		em {
			font-style: italic;
		}

		b,
		strong {
			font-weight: bold;
		}

		blockquote {
			border-left: 4px solid ${({ theme }) => theme.colors.primary600};
			background-color: ${({ theme }) => theme.colors.primary100};
			color: ${({ theme }) => theme.colors.neutral800};
			padding-top: ${8 / 16}em;
			padding-bottom: ${8 / 16}em;
		}

		code {
			font-size: 0.8rem;
			font-family: 'JetBrainsMono', monospace;
			background-color: ${({ theme }) => theme.colors.neutral100};
			border: ${({ theme }) => `1px solid ${theme.colors.neutral200}`};
			color: ${({ theme }) => theme.colors.neutral800};
			padding-left: ${6 / 16}em;
			padding-right: ${6 / 16}em;
			border-radius: 4px;
		}

		ul:not([data-type='taskList']) {
			list-style-type: disc;
		}

		ul[data-type='taskList'] {
			display: flex;
			flex-direction: column;
			gap: ${4 / 16}em;
			padding-left: 0;
			margin-left: 0;

			li {
				display: flex;
				align-items: center;
				gap: ${8 / 16}em;

				input {
					margin: 0;
				}
			}
		}

		ol {
			list-style-type: decimal;
		}

		.current-link {
			&,
			&::selection {
				background-color: ${({ theme }) => theme.colors.primary100};
			}
		}

		a {
			color: ${({ theme }) => theme.colors.secondary600};

			:visited {
				color: ${({ theme }) => theme.colors.secondary600};
			}
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		tr:nth-child(odd) {
			background-color: #f5f5f5;
		}

		th,
		td {
			padding: 16px 24px;
			vertical-align: top;
			border: 0px;

			p,
			li {
				font-weight: 400;
				font-size: 16px;
				line-height: 24.8px;
			}

			a {
				text-decoration: underline;
			}
		}
	}
`;