@charset "UTF-8";
/* GPLv3 license
FAS - Callout Cite
Author: ElsaTam (Kapirklaa in Discord)
*/
body {
  --cite-decoration-width: 50px;
}

.is-mobile {
  --cite-decoration-width: 30px;
}

.callout[data-callout~=cite-fas],
.callout[data-callout~=quote-fas] {
  font-style: italic;
  position: relative;
  padding-inline-start: calc(var(--cite-decoration-width) + 5px);
  background: none;
  border: none;
  border-inline-start: var(--blockquote-border-thickness) solid rgb(var(--callout-color));
}
.callout[data-callout~=cite-fas]:not(.is-collapsible) .callout-title,
.callout[data-callout~=quote-fas]:not(.is-collapsible) .callout-title {
  display: none;
}
.callout[data-callout~=cite-fas].is-collapsible,
.callout[data-callout~=quote-fas].is-collapsible {
  display: flex;
  flex-direction: column-reverse;
}
.callout[data-callout~=cite-fas].is-collapsible .callout-title,
.callout[data-callout~=quote-fas].is-collapsible .callout-title {
  background: none;
  justify-content: flex-end;
}
.callout[data-callout~=cite-fas].is-collapsible .callout-icon,
.callout[data-callout~=quote-fas].is-collapsible .callout-icon {
  display: none;
}
.callout[data-callout~=cite-fas].is-collapsible .callout-title-inner::before,
.callout[data-callout~=quote-fas].is-collapsible .callout-title-inner::before {
  content: "~ ";
}
.callout[data-callout~=cite-fas] .callout-content,
.callout[data-callout~=quote-fas] .callout-content {
  border: none;
  padding: 0;
}
.callout[data-callout~=cite-fas] .callout-content > :first-child,
.callout[data-callout~=quote-fas] .callout-content > :first-child {
  margin-top: 0;
}
.callout[data-callout~=cite-fas] .callout-content > :plast-child,
.callout[data-callout~=quote-fas] .callout-content > :plast-child {
  margin-bottom: 0;
}
.callout[data-callout~=cite-fas]::after,
.callout[data-callout~=quote-fas]::after {
  content: "“";
  position: absolute;
  font-style: italic;
  text-align: left;
  font-size: calc(var(--cite-decoration-width) * 2);
  line-height: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--cite-decoration-width);
  color: rgb(var(--callout-color));
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgba(var(--callout-color), 0.1);
}
.callout[data-callout~=cite-fas] cite,
.callout[data-callout~=quote-fas] cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--text-muted);
  text-align: right;
}
