import styled from "styled-components";

const ModalContent = styled.div`
	padding: ${({ theme }) => `${theme.spacing.s} ${theme.spacing.m}`};
`;

const Description = styled.p`
${(p) => p.theme.textStyle.uiM};
	color: ${({ theme }) => theme.color.textHighEmphasis};
`;

const Label = styled.p`
	${(p) => p.theme.textStyle.fieldLabel};
	color: ${({ theme }) => theme.color.textMediumEmphasis};
	margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const LoaderWrapper = styled.div`
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 32px;
`;

const RenewTextButton = styled.div`
	margin-top: 24px;
	margin-bottom: 8px;
`;

const PreviewLinkWrapper = styled.div<{ expired?: boolean }>`
	pointer-events: ${(p) => (p.expired ? "none" : "unset")};
	user-select: ${(p) => (p.expired ? "none" : "unset")};
	padding: ${(p) => p.theme.spacing.s} 0;
`;

const StatusLineWrapper = styled.div`
	display: flex;
	gap: 10px;
	width: 100%;
`;

export { Description, Label, LoaderWrapper, ModalContent, PreviewLinkWrapper, RenewTextButton, StatusLineWrapper };
