<commit_before>@import "../../../../styles/variables.less";
@import "../../../../styles/mixins.less";

@blue: @brand-primary;
@page-width: 75%;

.media-body {
  margin: 0 60px;
  padding: 40px 0;
  counter-reset: figure;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 15px;
    color: @gray-dark;
  }

  p {
    margin: 10px 0 0;
    color: @gray;
  }

  > section,
  > figure,
  > p,
  > .abstract,
  > table {
    &:first-child {
      margin-top: 0 !important; // Ensure first element has no top margin
    }
  }

  > section,
  > figure {
    margin-top: 60px;
  }

  section > section,
  section > figure {
    margin-top: 30px;
  }

  > figure,
  :not(figure) > figure {
    counter-increment: figure;
    counter-reset: subfigure;
  }

  figure {
    display: table;
    table-layout: fixed;
    width: 100%;
    color: @gray;

    > figcaption {
      display: table-caption;
      padding: 10px;
      font-size: 1.3rem;
      caption-side: bottom;

      &::before {
        margin-right: 5px;
        color: @gray-medium;
        font-weight: bold;
        content: "Figure " counter(figure) ".";
      }
    }

    > .media {
      display: block;
      margin: 0;
      text-align: center;
    }

    // Subfigures
    > figure {
      display: table-cell;
      counter-increment: subfigure;

      &::after {
        display: block;
        text-align: center;
        content: counter(figure) counter(subfigure, lower-alpha);
      }
    }
  }

  .footnote {
    font-size: 1rem;
  }

  .abstract {
    position: relative;
    background-color: @gray-lightest;
    padding: 45px 15px 15px 15px;
    margin: 30px 6rem 0 6rem;

    ul {
      margin: 15px 0 0 0;

      &::after {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 1.5rem;
        font-weight: bold;
        color: @gray;
        text-transform: uppercase;
        letter-spacing: 1px;
        content: "Abstract";
      }
    }
  }

  .example,
  .exercise,
  .note {
    margin: 30px 6rem 0 6rem;

    > header {
      border-bottom: 1px solid @gray;

      > .title {
        display: inline-block;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;

        &::before {
          content: ""; // Override content below if desired
          margin-right: 10px;
        }
      }
    }

    > section {
      padding: 5px 15px;
      background-color: @gray-lightest;
    }
  }

  .example,
  .exercise {
    > header {
      border-bottom: 1px solid @gray;

      > .title {
        padding: 0.1em 1em;
        font-weight: bold;
        color: @gray-lightest;
        background-color: @gray;
      }
    }

    .problem,
    .solution {
      padding: 0.5em 1em;
    }

    // Exercise Solutions contain a button to toggle showing or hiding the solution
    .solution {
      border-top: 1px solid @gray;

      // The Show/Hide Solution text
      > .ui-toggle-wrapper {
        text-align: center;

        > button.ui-toggle {
          text-align: center;
          font-weight: bold;
        }
      }

      &:not(.ui-solution-visible) {
        > .ui-toggle-wrapper > button.ui-toggle::before { content: '[Show Solution]'; }
        > section { display: none; }
      }

      &.ui-solution-visible {<commit_msg>Hide outline around show/hide solution button<commit_after>@import "../../../../styles/variables.less";
@import "../../../../styles/mixins.less";

@blue: @brand-primary;
@page-width: 75%;

.media-body {
  margin: 0 60px;
  padding: 40px 0;
  counter-reset: figure;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 15px;
    color: @gray-dark;
  }

  p {
    margin: 10px 0 0;
    color: @gray;
  }

  > section,
  > figure,
  > p,
  > .abstract,
  > table {
    &:first-child {
      margin-top: 0 !important; // Ensure first element has no top margin
    }
  }

  > section,
  > figure {
    margin-top: 60px;
  }

  section > section,
  section > figure {
    margin-top: 30px;
  }

  > figure,
  :not(figure) > figure {
    counter-increment: figure;
    counter-reset: subfigure;
  }

  figure {
    display: table;
    table-layout: fixed;
    width: 100%;
    color: @gray;

    > figcaption {
      display: table-caption;
      padding: 10px;
      font-size: 1.3rem;
      caption-side: bottom;

      &::before {
        margin-right: 5px;
        color: @gray-medium;
        font-weight: bold;
        content: "Figure " counter(figure) ".";
      }
    }

    > .media {
      display: block;
      margin: 0;
      text-align: center;
    }

    // Subfigures
    > figure {
      display: table-cell;
      counter-increment: subfigure;

      &::after {
        display: block;
        text-align: center;
        content: counter(figure) counter(subfigure, lower-alpha);
      }
    }
  }

  .footnote {
    font-size: 1rem;
  }

  .abstract {
    position: relative;
    background-color: @gray-lightest;
    padding: 45px 15px 15px 15px;
    margin: 30px 6rem 0 6rem;

    ul {
      margin: 15px 0 0 0;

      &::after {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 1.5rem;
        font-weight: bold;
        color: @gray;
        text-transform: uppercase;
        letter-spacing: 1px;
        content: "Abstract";
      }
    }
  }

  .example,
  .exercise,
  .note {
    margin: 30px 6rem 0 6rem;

    > header {
      border-bottom: 1px solid @gray;

      > .title {
        display: inline-block;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;

        &::before {
          content: ""; // Override content below if desired
          margin-right: 10px;
        }
      }
    }

    > section {
      padding: 5px 15px;
      background-color: @gray-lightest;
    }
  }

  .example,
  .exercise {
    > header {
      border-bottom: 1px solid @gray;

      > .title {
        padding: 0.1em 1em;
        font-weight: bold;
        color: @gray-lightest;
        background-color: @gray;
      }
    }

    .problem,
    .solution {
      padding: 0.5em 1em;
    }

    // Exercise Solutions contain a button to toggle showing or hiding the solution
    .solution {
      border-top: 1px solid @gray;

      // The Show/Hide Solution text
      > .ui-toggle-wrapper {
        text-align: center;

        > .ui-toggle {
          outline: 0;
          text-align: center;
          font-weight: bold;
        }
      }

      &:not(.ui-solution-visible) {
        > .ui-toggle-wrapper > button.ui-toggle::before { content: '[Show Solution]'; }
        > section { display: none; }
      }

      &.ui-solution-visible {
{'fraction_non_alphanumeric': 0.1335244417622209, 'fraction_numerical': 0.024894387447193723, 'mean_word_length': 1.6719064893188231, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 51, 'https://': 0, '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': '6706904', 'n_tokens_mistral': 2418, 'n_tokens_neox': 2203, 'n_words': 523}