<script>
  import { blocked } from './blocked'
  import { init } from './reporter'
  import { buttons, dismiss } from './dismiss'

  init()
</script>

<div class="wrapper" class:hidden={!$blocked}>
  <div>
    <h1>Overtime</h1>
    <div>You have no time left on this website.</div>
    <hr />
    <div class="dismiss">
      <div>
        <i> dismiss for... </i>
      </div>
      <div class="links">
        {#each buttons as button}
          <!-- svelte-ignore a11y-missing-attribute -->
          <a on:click={() => dismiss(button.duration)}>{button.label}</a>
        {/each}
      </div>
    </div>
  </div>
</div>

<style>
  :global(*) {
    box-sizing: border-box;
  }

  .wrapper {
    position: fixed;
    color: #000;
    bottom: 0;
    left: 0;
    top: initial;
    right: initial;
    width: 100vw;
    height: 100vh;
    background-color: hsla(0, 0%, 100%, 0.975);
    z-index: 999999999;
    font-size: 1rem;
    padding: 1rem;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
      'Helvetica Neue', sans-serif;
    transition: all 300ms ease-out;
  }

  .wrapper.hidden {
    /* display: none; */
    bottom: -100vh;
  }

  @media (prefers-color-scheme: dark) {
    .wrapper {
      background-color: hsl(0, 0%, 0%, 0.925);
      color: #ffffff;
    }
  }

  .wrapper > div {
    margin: 3rem auto;
    max-width: 25rem;
  }

  .wrapper h1 {
    margin-bottom: 2rem;
  }

  .dismiss {
    display: flex;
    flex-direction: row;
  }

  .dismiss .links {
    margin-left: 1rem;
    margin-top: -0.1rem;
  }

  .dismiss .links a {
    color: inherit;
    text-decoration: inherit;
    display: block;
    cursor: pointer;
    padding: 0.1em;
    opacity: 0.6;
    transition: all 100ms ease-in-out;
  }

  .dismiss .links a:hover {
    transform: translateX(-0.25em);
    opacity: 1;
  }

  hr {
    outline: none;
    background: transparent;
    border: 1px inset currentColor;
    margin: 1em 0;
  }
</style>
