<script lang="ts">
  export let hide = false;
  let hidden = true;
</script>

<section class="labelborder" class:hide class:hidden>
  <header
    on:click={() => {
      if (hide) {
        hidden = !hidden;
      }
    }}
    on:keydown={(ev) => {
      if (["Space", "Enter"].includes(ev.key) && hide) hidden = !hidden;
    }}
  >
    <slot name="header-full">
      <h3><slot name="header" /></h3>
    </slot>
  </header>
  <div class="content">
    <slot />
  </div>
</section>

<style lang="scss">
  section.labelborder {
    margin-top: 0.66rem;

    header {
      display: flex;
      align-items: end;
      justify-content: space-between;

      border-bottom: 1px solid var(--foreground);
      padding-bottom: 0.33rem;
      margin-bottom: 0.33rem;

      h3 {
        margin: 0;
      }
    }

    &.hide {
      header {
        cursor: pointer;
      }

      transition: opacity 0.2s ease-in-out;
      &.hidden {
        opacity: 0.66;

        header {
          border-bottom-width: 0.5px;
        }

        .content {
          display: none;
        }
      }
    }
  }
</style>
