<commit_before><template>
  <div
    role="dialog"
    :class="[
      $options.className,
      { 'is-open': open }
    ]"
    @click.self="close">
    <div :class="`${$options.className}__window`">
      <header :class="`${$options.className}__header`">
        <slot name="header" />
        <button
          type="button"
          :class="`${$options.className}__close`"
          @click="close">
          <SvgIcon
            icon="close"
            :class="`${$options.className}__cross`" />
          <span :class="`${$options.className}__a11y`">
            Close
          </span>
        </button>
      </header>

      <div :class="`${$options.className}__content`">
        <slot name="main" />
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/icons/close'

export default {
  name: 'ModalDialog',
  className: 'ModalDialog',
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    document.addEventListener('keydown', this.closeKey)
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.closeKey)
  },
  methods: {
    close() {
      this.$emit('close')
    },
    closeKey(e) {
      if (this.open && e.keyCode === 27) {
        this.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ModalDialog {
  $root: &;

  position: fixed;
  top: 0;
  left: 0;
  z-index: depth("modal");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(color("dark"), 0.5);
  pointer-events: none;
  transition: opacity $trans-speed $trans-ease ($trans-speed * 2);

  &.is-open {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  &__window {
    @include shadow-box();

    display: flex;
    flex-direction: column;
    width: calc(100vw - var(--spacing-unit));
    max-width: 600px;
    height: calc((var(--vh, 1vh) * 100) - var(--spacing-unit));
    overflow: hidden;
    opacity: 0;
    background-color: color("light");
    transform: scale(0.95);
    transition:
      opacity $trans-speed $trans-ease $trans-speed,
      transform $trans-speed $trans-ease $trans-speed;

    #{$root}.is-open & {
      opacity: 1;
      transform: scale(1);
    }
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-unit);
    background-color: color("light");

    @include media("sm") {
      padding: calc(var(--spacing-unit) / 2);
    }
  }

  &__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background-color: transparent;
    color: color("dark");
  }

  &__cross {
    width: 100%;
    height: 100%;
  }

  &__a11y {
    @extend %a11y-hidden;
  }

  &__content {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-unit);
    padding-top: 0;

    @include media("sm") {
      padding: calc(var(--spacing-unit) / 2);
      padding-top: 0;
    }
  }
}
</style><commit_msg>Padding on inner element for modal because of a known bug in Firefox where padding collapses.<commit_after><template>
  <div
    role="dialog"
    :class="[
      $options.className,
      { 'is-open': open }
    ]"
    @click.self="close">
    <div :class="`${$options.className}__window`">
      <header :class="`${$options.className}__header`">
        <slot name="header" />
        <button
          type="button"
          :class="`${$options.className}__close`"
          @click="close">
          <SvgIcon
            icon="close"
            :class="`${$options.className}__cross`" />
          <span :class="`${$options.className}__a11y`">
            Close
          </span>
        </button>
      </header>

      <div :class="`${$options.className}__content`">
        <div :class="`${$options.className}__inner`">
          <slot name="main" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/icons/close'

export default {
  name: 'ModalDialog',
  className: 'ModalDialog',
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    document.addEventListener('keydown', this.closeKey)
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.closeKey)
  },
  methods: {
    close() {
      this.$emit('close')
    },
    closeKey(e) {
      if (this.open && e.keyCode === 27) {
        this.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ModalDialog {
  $root: &;

  position: fixed;
  top: 0;
  left: 0;
  z-index: depth("modal");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(color("dark"), 0.5);
  pointer-events: none;
  transition: opacity $trans-speed $trans-ease ($trans-speed * 2);

  &.is-open {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  &__window {
    @include shadow-box();

    display: flex;
    flex-direction: column;
    width: calc(100vw - var(--spacing-unit));
    max-width: 600px;
    height: calc((var(--vh, 1vh) * 100) - var(--spacing-unit));
    overflow: hidden;
    opacity: 0;
    background-color: color("light");
    transform: scale(0.95);
    transition:
      opacity $trans-speed $trans-ease $trans-speed,
      transform $trans-speed $trans-ease $trans-speed;

    #{$root}.is-open & {
      opacity: 1;
      transform: scale(1);
    }
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-unit);
    background-color: color("light");

    @include media("sm") {
      padding: calc(var(--spacing-unit) / 2);
    }
  }

  &__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background-color: transparent;
    color: color("dark");
  }

  &__cross {
    width: 100%;
    height: 100%;
  }

  &__a11y {
    @extend %a11y-hidden;
  }

  &__content {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  &__inner {
    width: 100%;
    padding: 0 var(--spacing-unit) var(--spacing-unit);

    @include media("sm") {
      padding: 0 calc(var(--spacing-unit) / 2) calc(var(--spacing-unit) / 2);
    }
  }
}
</style>
{'fraction_non_alphanumeric': 0.17415730337078653, 'fraction_numerical': 0.019038701622971287, 'mean_word_length': 2.3678402522333157, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3302026', 'n_tokens_mistral': 2352, 'n_tokens_neox': 2194, 'n_words': 441}