import { colors, radius, spaces, zIndexes } from '@/styles/variables';
import styled, { css } from 'styled-components';

import { IModal } from './Modal.interface';

export const StyledOverlay = styled.div<IModal>`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .30);
  z-index: 100;
`;

export const StyledWrapper = styled.div<IModal>`
  position: fixed;
  top: 50%;
  left: 50%;

  width: 30rem;
  max-height: 85vh;
  max-width: 90%;

  margin-top: -5vh;

  /* border-radius: ${radius.md}; */
  /* background-color: ${colors.gray20}; */
  box-shadow: 0px 4px 25px rgba(45, 46, 69, 0.1);
  animation: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  // among other things, prevents text alignment inconsistencies when dialog cant be centered in the viewport evenly.
  // affects animated and non-animated dialogs alike.
  transform: translate(-50%, -50%);
  will-change: transform;
  overflow: hidden;
  overflow-y: auto;
  z-index: ${zIndexes['modal']};

  &:focus {
    outline: none
  }
`;

export const StyledTitle = styled.div<IModal>`
  color: ${colors.primary70};
  background-color:#FAFAFA;
  padding: ${spaces[4]};
`;

export const StyledContent = styled.div<IModal>`
  padding: ${spaces[5]};
  contain: paint;
  background-color:${colors.white};

`;