import styled from 'styled-components';

export const Wrapper = styled.div`
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 99999;
  justify-content: center;
`;

export const Backdrop = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.4);
`;

type ContentWrapperProps = {
  maxWidth?: number;
};

export const ContentWrapper = styled.div<ContentWrapperProps>`
  position: relative;
  width: 100%;
  max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : '612px')};
  min-height: 40px;
  border-radius: 4px;
  overflow: visible;
  z-index: 1;

  background: ${({ theme }) => theme.colors.neutral[0]};
  align-self: center;
  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
`;

type ContentHeaderProps = {
  hasTitle?: boolean;
};

export const ContentHeader = styled.div<ContentHeaderProps>`
  width: 100%;
  position: relative;
  padding: 24px;

  ${({ hasTitle }) =>
    !hasTitle &&
    `
		padding: 40px 0 0 0;
		border-bottom: none;
	`}

  button {
    position: absolute;
    right: 0;
    top: 0;
  }
`;

export const CloseButton = styled.div`
  position: absolute;
  right: 0;
  z-index: 100000;
`;