/* GPLv3 license
FAS - Aside
Author: ElsaTam (Kapirklaa in Discord)
*/
/* Compatibility with ITS theme/snippets */
.markdown-source-view > div, .markdown-preview-view {
  container: markdown-view/inline-size;
}

:where(.markdown-rendered ul),
:where(.markdown-rendered ol) {
  display: flow-root;
}

body {
  --aside-width: 250px;
  --aside-gap: 15px;
  --aside-border-thickness: 4px;
}

.is-mobile {
  --aside-width: 200px;
  --aside-border-thickness: 2px;
}

.markdown-preview-view aside,
.markdown-preview-view .aside-left,
.markdown-preview-view .aside-right {
  text-decoration: none;
  display: block;
  border-radius: var(--radius-l);
  border: var(--aside-border-thickness) var(--color-accent) groove;
  padding: 15px;
  margin: 5px;
  width: var(--aside-width);
}

.is-readable-line-width.markdown-preview-view .aside-left {
  float: left;
  clear: left;
  margin-right: var(--fas-float-inline-margin, 12px);
}

.is-readable-line-width.markdown-preview-view aside,
.is-readable-line-width.markdown-preview-view .aside-right {
  float: right;
  clear: right;
  margin-left: var(--fas-float-inline-margin, 12px);
}

@media screen {
  @container markdown-view (width > 1100px) {
    .markdown-preview-view aside,
    .is-readable-line-width.markdown-preview-view .aside-right,
    .is-readable-line-width.markdown-preview-view .aside-left {
      --aside-width: calc(50cqw - var(--file-line-width) * 0.5 - var(--aside-gap) * 2);
      margin-inline: 0;
      border-block: none;
      padding-block: 0;
    }
    .is-readable-line-width.markdown-preview-view .aside-left {
      margin-left: calc(-1 * var(--aside-width) - var(--aside-gap));
      border-left: none;
      padding-inline: 0 15px;
      text-align: right;
    }
    .markdown-preview-view aside,
    .is-readable-line-width.markdown-preview-view .aside-right {
      margin-right: calc(-1 * var(--aside-width) - var(--aside-gap));
      border-right: none;
      padding-inline: 15px 0;
    }
  }
}
@media print {
  .print aside,
  .print .aside-left,
  .print .aside-right {
    page-break-inside: avoid;
  }
  .print .aside-left {
    float: left;
    clear: left;
    margin-right: var(--fas-float-inline-margin, 12px);
  }
  .print aside,
  .print .aside-right {
    float: right;
    clear: right;
    margin-left: var(--fas-float-inline-margin, 12px);
  }
}
