// Re-usable classes

.inverted {
  color: $color-text-inverted;
  background: $color-bg-dark;

  a,
  a.is-active,
  h2,
  h3,
  h4 {
    color: $color-text-inverted;
  }
}

.text-formatted h2:not(:first-child) {
  margin-top: calc(2 * $grid-gutter);
}

// media attribution aka. copyright info
.attribution {
  font-size: $font-size-s;
}
figcaption .attribution {
  font-weight: normal;
}

// Editor-embedded media
.field--name-body,
.field--name-field-body {
  .caption .media,
  figure {
    .field {
      margin: 1rem 0; // use .field default, unset filter.caption's unset
    }
  }
}

// Editor styles

strong.textmarker {
  background-color: yellow;
  font-weight: normal;
}

.inset {
  // see .view .infobox in views.scss
  margin-bottom: 1.25rem;
  padding: 0.5rem 1.25rem 1.25rem;
  color: var(--color-info);
  background: var(--color-bg-info);
  > h3,
  h4 {
    color: var(--color-info);
  }
  @include breakpoint(m) {
    float: right;
    max-width: 16.25rem;
    margin: 0 0 1.25rem 1.25rem;
  }
}

// Blockquote styles

.callout {
  display: inline-flex;
  padding: var(--row-gap) var(--grid-gutter);
  color: var(--color-text-inverted);
  background-color: var(--color-info);
  block-size: auto; // "height"

  // uncomment when using before/after icons
  // gap: var(--grid-gutter);

  p {
    color: var(--color-text-inverted) !important;
  }
}

blockquote.plain {
  padding-inline: calc(2 * var(--grid-gutter));

  &::before,
  &::after {
    display: none;
  }
}

blockquote.plain,
blockquote.plain p {
  text-align: left;
  border-width: 0;
  background-color: transparent;
  font-family: var(--font-base);
  font-size: var(--font-size-default);
  font-style: normal;
}

.quotee {
  font-size: var(--font-size-default);
}

blockquote.plain .quotee {
  font-size: var(--font-size-s);
}

.text-formatted a.cta,
.ck-content a.cta {
  display: inline-block;
  padding: 0.25em 1em;
  border: 0.125rem solid var(--color-link);
  border-radius: 50vi;
}

// Maps-related

.leaflet-popup-content-wrapper {
  border-radius: 2px;
}

.leaflet-popup-content {
  font-family: var(--font-base);
  font-size: var(--font-size-s);

  a {
    @extend %link-default;

    font-weight: bold;
  }
}

.leaflet-container {
  a.leaflet-popup-close-button {
    @extend %button;

    top: 0.25em;
    right: 0.25em;
    width: auto;
    height: auto;
    padding: 0 0.5em;
    color: unset;
    font: unset;
    font-size: var(--font-size-s);
  }
}

// Form tips in front-end

.formtip {
  color: var(--color-text-inverted);
  border: 2px solid var(--color-info);
  background-color: var(--color-info);

  &::before {
    color: var(--color-text-inverted);
  }

  &:focus,
  &:hover,
  &:active {
    border-color: var(--color-info);
    background-color: var(--color-text-inverted);

    &::before {
      color: var(--color-info);
    }
  }
}

.formtips-processed {
  padding: 1.25rem;
  border-radius: 2px;

  &::before {
    border: 6px solid transparent;
    border-bottom-color: var(--color-info);
  }

  a {
    text-decoration: underline;
    color: var(--color-text-inverted);
  }
}

div.description.formtips-processed,
.formtips-processed.filter-guidelines,
.form-item .description.formtips-processed,
.form-item__description.formtips-processed {
  background-color: var(--color-info);
}

.qa--only {
  background-color: var(--color-bg-danger);
}

.qa--only::after {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  display: block;
  content: "For QA purposes only";
  color: var(--color-danger);
  font-size: 0.5rem;
}

// on-page menu
.anchorlinks {
  display: flex;
  flex-flow: row wrap;
  margin-left: 0;
  padding-left: 0;
  list-style: none;

  a {
    padding: 0 1rem;
  }
  @include icon(arrow-down) {
    position: relative;
    top: 0.333rem;
    margin-right: 0.25rem;
    color: var(--color-text-muted);
  }
}

// table sort indicators
.tablesort--desc {
  @include icon(arrow-down);

  background-image: none;
}
.tablesort--asc {
  @include icon(arrow-up);

  background-image: none;
}

// for easier icon link styling
// (ckeditor sanitizes empty tags, thus using FontAwesome method is tricky)

.icon {
  &::before {
    margin-right: 0.666rem;
  }
  &::after {
    margin-left: 0.666rem;
  }
  &.tv {
    @include icon(tv, fas, before);
  }
  &.location-dot {
    @include icon(location-dot, fas, before);
  }
  &.table-list {
    @include icon(table-list, fas, before);
  }
  &.table-cells-large {
    @include icon(table-cells-large, fas, before);
  }
  &.box-archive {
    @include icon(box-archive, fas, before);
  }
}

%centericon {
  display: flex;
  place-content: center;
}

// More-links in synopsis
// Related: templates/field/field--field-content-paragraphs--view-mode-synopsis.html.twig
// Renders a complimentary conditional "more link" for paragraphs, here we hide the redundant link

.synopsis-more-link:has(a) + .synopsis-more-link:has(a) {
  display: none;
}
