import styled from 'styled-components';

export default styled.div`${({height,width})=>`
    .ReactModal__Overlay{
      background: rgba(0, 0, 0, 0.54) !important;
      z-index:2018;
      .ReactModal__Content{
        padding : 0! important;
        overflow: hidden! important;
        top: ${`calc(50vh - ${height/2}px)`} !important;
        left: ${`calc(50vw - ${width/2}px)`} !important;
        height : ${height}px;
        width : ${width}px;
      }
      .modal-header{
        display : flex;
        height:60px;
        position: relative;
        border-bottom: solid 1px rgba(155, 155, 155, 0.4);
        .header-text {
          font-size: 18px;
          color: rgba(0, 0, 0, 0.7);
          width: calc(100% - 50px);
          display: flex;
          align-items: center;
          padding-left: 20px;
        }
        .closeBtn {
          cursor : pointer;
          width: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
`}`