---
interface Props {
  desktop?: boolean
  tablet?: boolean
  mobile?: boolean
}

const { desktop, tablet, mobile } = Astro.props
---

{
  desktop && !tablet && !mobile && (
    <div class="on-desktop-only">
      <slot />
    </div>
  )
}{
  !desktop && tablet && !mobile && (
    <div class="on-tablet-only">
      <slot />
    </div>
  )
}{
  !desktop && !tablet && mobile && (
    <div class="on-mobile-only">
      <slot />
    </div>
  )
}{
  desktop && tablet && !mobile && (
    <div class="on-desktop-tablet-only">
      <slot />
    </div>
  )
}{
  desktop && !tablet && mobile && (
    <div class="on-desktop-mobile-only">
      <slot />
    </div>
  )
}{
  !desktop && tablet && mobile && (
    <div class="on-tablet-mobile-only">
      <slot />
    </div>
  )
}

<style lang="sass">
  @use '/src/styles/breakpoints.sass'
</style>