import styled from 'styled-components';

const css = styled.div;

export const ModalContainerStyle = css<any>`
   @keyframes fadeIn {
      0% {
         opacity: 0;
      }
      100% {
         opacity: 1;
      }
   }

   @keyframes fadeOut {
      0% {
         opacity: 1;
      }
      100% {
         opacity: 0;
      }
   }

   @keyframes slideDownIn {
      0% {
         transform: translateY(100%);
      }
      100% {
         transform: translateY(0%);
      }
   }

   @keyframes slideDownOut {
      0% {
         transform: translateY(0%);
      }
      100% {
         transform: translateY(100%);
      }
   }

   .ds-modal-container {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      transform: translate3d(0, 0, 0);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: 0.3s ${(p) => p.animation}In;
      ${(p) => p.disableAnimation && 'animation: none;'};

      &.closing {
         animation: 0.3s ${(p) => p.animation}Out;
         animation-fill-mode: forwards;
         ${(p) => p.disableAnimation && 'animation: none;'};
      }

      .bg-background {
         background: rgba(0, 0, 0, 0.8);
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         position: absolute;
      }

      .modal-content {
         width: auto !important;
      }
   }
`;

export const ModalStyle = css<any>`
   background: white;
   margin: auto;
   //border-radius: 15px;
   position: relative;

   &.full-screen {
      border-radius: 0px;
      height: 100%;
      width: 100%;
      max-width: 800px;
   }
`;
