<template>
  <span
    :class="{ 'dark-overlay': darkOverlay }"
    @click.self.stop="onCancel()"
  >
    <div
      class="dialog-modal panel panel-default"
      @click.stop=""
    >
      <div class="panel-heading dialog-modal-heading">
        <div class="title">
          <slot name="header" />
        </div>
      </div>
      <div class="dialog-modal-content">
        <slot name="default" />
      </div>
      <div class="dialog-modal-footer user-interactions panel-footer">
        <slot name="footer" />
      </div>
    </div>
  </span>
</template>

<script src="./dialog_modal.js"></script>

<style lang="scss">
@import '../../_variables.scss';

// TODO: unify with other modals.
.dark-overlay {
  &::before {
    inset-block-end: 0;
    content: " ";
    display: block;
    cursor: default;
    inset-inline-start: 0;
    position: fixed;
    inset-inline-end: 0;
    inset-block-start: 0;
    background: rgba(27,31,35,.5);
    z-index: 2000;
  }
}

.dialog-modal.panel {
  inset-block-start: 0;
  inset-inline-start: 50%;
  max-block-size: 80vb;
  max-inline-size: 90vi;
  margin-block: 15vb;
  margin-inline: auto;
  position: fixed;
  transform: translateX(-50%);
  z-index: 2001;
  cursor: default;
  display: block;
  inline-size: max-content;
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
  [dir="rtl"] & {
    transform: translateX(50%);
  }

  .dialog-modal-heading {
    .title {
      text-align: center;
    }
  }

  .dialog-modal-content {
    margin: 0;
    padding-block: 1rem;
    padding-inline: 1rem;
    background-color: $fallback--bg;
    background-color: var(--bg, $fallback--bg);
    white-space: normal;
  }

  .dialog-modal-footer {
    margin: 0;
    padding-block: .5em;
    padding-inline: .5em;
    background-color: $fallback--bg;
    background-color: var(--bg, $fallback--bg);
    border-block-start: 1px solid $fallback--border;
    border-block-start: 1px solid var(--border, $fallback--border);
    display: flex;
    justify-content: flex-end;

    button {
      inline-size: auto;
      margin-inline-start: .5rem;
    }
  }
}

</style>
