<commit_before>@import '@bolt/core';
@import '@bolt/global/styles/06-themes/_themes.all.scss';

/* ------------------------------------ *\
   Modal
   ---
   Based originally off of
   https://github.com/edenspiekermann/a11y-dialog
   before heavy modifications
   and customizations
\* ------------------------------------ */

/**
 * When `<dialog>` is properly supported, the overlay is implied and can be
 * styled with `::backdrop`, which means the DOM one should be removed.
 */
/*
[data-a11y-dialog-native] .dialog-overlay {
  @todo: look further into this to see why the natively supported ::backdrop wasn't showing up as expected
  display: none;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.66);
}
*/

$bolt-modal-overlay-bg-color: rgba(bolt-color(black), bolt-opacity(60));
$bolt-modal-border-width: $bolt-border-width;
$bolt-modal-border-style: $bolt-border-style;
$bolt-modal-border-color: bolt-theme(text, 0.15);
$bolt-modal-border-radius: bolt-border-radius(small);

// Hide all the non-trigger (button / link, etc) content inside the <bolt-modal> container before the JS kicks in
bolt-modal:not([ready]) {
  > *:not([slot*='trigger']) {
    display: none;
  }
}

.c-bolt-modal {
  display: inline;
}

.c-bolt-modal__overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background-color: $bolt-modal-overlay-bg-color;
  transition: opacity 0.3s ease;

  &.is-open {
    @include bolt-z-index(modalBG);

    opacity: 1;
  }
}

.c-bolt-modal__content {
  @include bolt-z-index(modal);

  display: block;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(100px);
  max-width: calc(100% - #{bolt-spacing(small) * 2});
  max-height: 90vh; // @todo: refactor min / max height and width; placeholder styles for demo
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: 0.3s ease; // @todo: abstract away transition styles

  @include bolt-mq(xsmall) {
    max-width: calc(100% - #{bolt-spacing(medium) * 2});
  }

  &.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: 0.3s ease; // @todo: abstract away transition styles
  }
}

.c-bolt-modal__content--width-optimal {
  width: 75ch;
}

.c-bolt-modal__content--width-regular {
  width: 100% / 12 * 10;<commit_msg>fix: lint<commit_after>@import '@bolt/core';
@import '@bolt/global/styles/06-themes/_themes.all.scss';

/* ------------------------------------ *\
   Modal
   ---
   Based originally off of
   https://github.com/edenspiekermann/a11y-dialog
   before heavy modifications
   and customizations
\* ------------------------------------ */

/**
 * When `<dialog>` is properly supported, the overlay is implied and can be
 * styled with `::backdrop`, which means the DOM one should be removed.
 */
/*
[data-a11y-dialog-native] .dialog-overlay {
  @todo: look further into this to see why the natively supported ::backdrop wasn't showing up as expected
  display: none;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.66);
}
*/

$bolt-modal-overlay-bg-color: rgba(bolt-color(black), bolt-opacity(60));
$bolt-modal-border-width: $bolt-border-width;
$bolt-modal-border-style: $bolt-border-style;
$bolt-modal-border-color: bolt-theme(text, 0.15);
$bolt-modal-border-radius: bolt-border-radius(small);

// Hide all the non-trigger (button / link, etc) content inside the <bolt-modal> container before the JS kicks in
bolt-modal:not([ready]) {
  > *:not([slot*='trigger']) {
    display: none;
  }
}

.c-bolt-modal {
  display: inline;
}

.c-bolt-modal__overlay {
  display: block;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: $bolt-modal-overlay-bg-color;
  transition: opacity 0.3s ease;

  &.is-open {
    @include bolt-z-index(modalBG);

    opacity: 1;
  }
}

.c-bolt-modal__content {
  @include bolt-z-index(modal);

  display: block;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(100px);
  max-width: calc(100% - #{bolt-spacing(small) * 2});
  max-height: 90vh; // @todo: refactor min / max height and width; placeholder styles for demo
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: 0.3s ease; // @todo: abstract away transition styles

  @include bolt-mq(xsmall) {
    max-width: calc(100% - #{bolt-spacing(medium) * 2});
  }

  &.is-open {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: 0.3s ease; // @todo: abstract away transition styles
  }
}

.c-bolt-modal__content--width-optimal {
  width: 75ch;
}

.c-bolt-modal__content--width-regular {
  width: 100% / 12 * 10;
{'fraction_non_alphanumeric': 0.1837536171971889, 'fraction_numerical': 0.028110789582472095, 'mean_word_length': 3.0257903494176372, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 2, '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': '5927434', 'n_tokens_mistral': 1830, 'n_tokens_neox': 1640, 'n_words': 422}