<commit_before>import styled from 'styled-components'

import { theme, animate, cs } from '@utils'
import Img from '@Img'

// display: ${props => (props.show ? 'block' : 'none')};
export const Mask = styled.div`
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: ${cs.zIndex.modalOverlay};
  display: ${({ show }) => (show ? 'block' : 'none')};
`

export const Wrapper = styled.div`
  position: relative;
  background-color: ${({ background }) =>
    background === 'default' ? theme('modal.bg') : theme('preview.bg')};
  margin: 0 auto;
  top: ${({ offsetTop }) => offsetTop};
  width: ${({ width }) => width};
  min-height: 320px;
  max-height: 81vh;
  box-shadow: -5px 6px 37px -8px rgba(0, 0, 0, 0.42);
  /* border: 1px solid; */
  border-top: 3px solid;
  border-color: ${({ mode }) =>
    mode === 'default' ? theme('modal.border') : theme('baseColor.error')};
  animation: ${animate.zoomInRule};

  ${cs.media.tablet`width: 460px`};
  ${cs.media.mobile`width: 320px`};
`
export const ChildrenWrapper = styled.div`
  min-height: 320px;
  max-height: 80vh;
  height: auto;
  overflow-y: scroll;
`
export const CloseBtn = styled(Img)`
  fill: ${({ mode }) =>
    mode === 'default' ? theme('font') : theme('baseColor.error')};
  position: absolute;
  width: 30px;<commit_msg>style(modal): sexy round border<commit_after>import styled from 'styled-components'

import { theme, animate, cs } from '@utils'
import Img from '@Img'

// display: ${props => (props.show ? 'block' : 'none')};
export const Mask = styled.div`
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: ${cs.zIndex.modalOverlay};
  display: ${({ show }) => (show ? 'block' : 'none')};
`

export const Wrapper = styled.div`
  position: relative;
  background-color: ${({ background }) =>
    background === 'default' ? theme('modal.bg') : theme('preview.bg')};
  margin: 0 auto;
  top: ${({ offsetTop }) => offsetTop};
  width: ${({ width }) => width};
  border-radius: 8px;
  min-height: 320px;
  max-height: 81vh;
  box-shadow: -5px 6px 37px -8px rgba(0, 0, 0, 0.42);
  /* border: 1px solid; */
  border-top: 3px solid;
  border-color: ${({ mode }) =>
    mode === 'default' ? theme('modal.border') : theme('baseColor.error')};
  animation: ${animate.zoomInRule};

  ${cs.media.tablet`width: 460px`};
  ${cs.media.mobile`width: 320px`};
`
export const ChildrenWrapper = styled.div`
  min-height: 320px;
  max-height: 80vh;
  height: auto;
  overflow-y: scroll;
`
export const CloseBtn = styled(Img)`
  fill: ${({ mode }) =>
    mode === 'default' ? theme('font') : theme('baseColor.error')};
  position: absolute;
  width: 30px;
{'fraction_non_alphanumeric': 0.19970193740685543, 'fraction_numerical': 0.027198211624441134, 'mean_word_length': 3.8729582577132486, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4024550', 'n_tokens_mistral': 1025, 'n_tokens_neox': 956, 'n_words': 244}