<script>
  export let type;
</script>

<style>
  .panel {
    position: var(--position, initial);
    top: 10px;
    font-size: large;
    width: var(--width, 350px);
    padding: 20px;
    border: 4px solid var(--fg, white);
    box-shadow: 3px 3px #000, 10px 10px var(--bg, white);
  }

  @media only screen and (max-width: 560px) {
    .panel {
      width: calc(100% - 60px);
    }
  }

  h1 {
    margin-top: -8px; /* #csscrimes */
  }
</style>

<div class="panel {type}">
  <h1>{type}</h1>
  <slot></slot>
</div>