.jstElements {
  display: flex;
  gap: 0.125em;
  flex-wrap: wrap;
  margin: 0.125em 0 0.25em;

  .sr-only {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    top: -10000em;
  }
  .hidden {
    visibility: hidden;
  }

  button {
    width: 2rem;
    height: 1.8rem;
    padding: 0;
    border: 1px solid light-dark(#767676, #ddd);
    border-radius: 0.2em;
    position: relative;

    &:hover,
    &:focus {
      border-color: #e905a8;
    }

    span.jstb_icon {
      display: inline-block;
      width: 1.9rem;
      height: 1.7rem;

      /* Couleur de l'icône (modifiable à volonté) */
      background-color: currentColor;

      /* Application du masque SVG - voir ci-dessous */
      mask-image: var(--svg);
      mask-repeat: no-repeat;
      mask-position: center;
    }

    span:not(.jstb_icon) {
      position: absolute;
      bottom: 2rem;
      color: light-dark(#333, #fafafa);
      background-color: light-dark(#fff, #333);
      padding: 0.25em;
      box-shadow: 0px 0px 3px 0px rgba(112, 112, 112, 1);
      white-space: nowrap;
    }
  }
}

/* Hack to display masks when used in combination with the a11yConfig plugin and contrast is enforced/inverted */
.a42-ac-inv-contrast,
.a42-ac-high-contrast {
  button {
    &:hover,
    &:focus {
      border: #e905a8 !important;
    }
    span.jstb_icon {
      background-color: currentColor !important;
    }
  }
}

.jstSpacer {
  width: 0.25em;
}

.jstDialog {
  display: flex;
  gap: 0.125em;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0.5em 1em;

  h1 {
    font-size: 1.125em;
    font-weight: bold;
    border-bottom: 1px solid;
  }

  .field {
    display: grid;
    gap: 0.5em;
    grid-template-columns: 1fr 2fr;

    label {
      width: inherit;
    }
  }

  .form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    justify-content: flex-end;
  }

  button {
    height: 1.8rem;
    border: 1px solid light-dark(#767676, #ddd);
    border-radius: 0.2em;
    position: relative;

    &:hover,
    &:focus {
      border-color: #e905a8;
    }
  }
}

/* Buttons
-------------------------------------------------------- */
.jstElements button {
  &.jstb_strong {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_strong.svg');
  }
  &.jstb_em {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_em.svg');
  }
  &.jstb_ins {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_ins.svg');
  }
  &.jstb_del {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_del.svg');
  }
  &.jstb_quote {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_quote.svg');
  }
  &.jstb_code {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_code.svg');
  }
  &.jstb_foreign {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_foreign.svg');
  }
  &.jstb_br {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_br.svg');
  }
  &.jstb_ul {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_ul.svg');
  }
  &.jstb_ol {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_ol.svg');
  }
  &.jstb_pre {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_pre.svg');
  }
  &.jstb_bquote {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_bquote.svg');
  }
  &.jstb_link {
    --svg: url('index.php?pf=commentsWikibar/img/jstb_link.svg');
  }
}