import styled from 'styled-components';
import css from '@styled-system/css';
import { BoxBlock } from "../../modules";
import TitleBlock from "../../modules/TitleBlock";
import { AJCenter, BorderRadius, BoxShadow, colors, InlineBlock, JSEnd, JSBetween, } from "../../globalStyled";
export const OverlayStyled = styled(BoxBlock) `
  ${AJCenter}
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 220;
`;
export const ModalWrapperDiv = styled(BoxBlock) `
  z-index: 2;
  background: ${colors.white};
  ${BoxShadow.medium08}
  ${BorderRadius.medium};
  min-width: 300px;
  position: relative;
  ${css({ pb: 6 })}
`;
export const HeaderWrapperDiv = styled(BoxBlock) `
  ${JSBetween}
  ${css({ pl: 6, pr: 2 })}
`;
export const HeaderBlockTitle = styled(TitleBlock) `
  ${css({ pt: 6, pb: 9 })}
`;
export const ModalCloseDiv = styled(BoxBlock) `
  ${InlineBlock}
  ${css({ p: '6px', mt: 2 })}
  width: 36px;
  height: 36px;
  cursor: pointer;
  outline: none;
  ${BorderRadius.medium};
  background-color: transparent;
  color: ${colors.grays.text};

  &:hover {
    background-color: ${colors.buttonSecondaryHover};
  }
`;
export const ContentWrapperDiv = styled(BoxBlock) `
  ${css({ px: 6 })}
`;
export const ActionBarDiv = styled(BoxBlock) `
  ${JSEnd}
  ${css({ mt: 9, px: 6 })}
  & > button {
    ${css({ ml: 4 })}
  }
`;
