---
interface Props {
  background?: string
  color?: string
  border?: string
}

const { background, color, border } = Astro.props
---

{
  border ? (
    <div class="modal__content" style={`background-color: ${background}; color: ${color}; border: 2px solid ${border}`}>
      <slot />
    </div>
  ) : (
    <div class="modal__content" style={`background-color: ${background}; color: ${color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
      <slot />
    </div>
  )
}

<style lang="sass">
  @use '../../configs/design/site' as site
  @use 'sass:color'

  .modal
    display: flex
    justify-content: center
    align-items: center
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    backdrop-filter: blur(20px)
    background-color: rgba(color.adjust(site.$dark-background, $blackness: 5%), 0.6)
    z-index: 999

    &__content
      border-radius: 8px
      padding: 2rem
      position: relative
</style>