.markdown {

  // {{< tabs >}}
  .book-tabs {
    margin-top: $padding-16;
    margin-bottom: $padding-16;

    border: $padding-1 solid var(--gray-200);
    border-radius: var(--border-radius);

    display: flex;
    flex-wrap: wrap;

    label {
      display: inline-block;
      padding: $padding-8 $padding-16;
      border-bottom: $padding-1 transparent;
      cursor: pointer;
    }

    .book-tabs-content {
      order: 999; //Move content blocks to the end
      width: 100%;
      border-top: $padding-1 solid var(--gray-100);
      padding: $padding-16;
      display: none;
    }

    input[type="radio"]:checked+label {
      border-bottom: $padding-1 solid var(--color-link);
    }

    input[type="radio"]:checked+label+.book-tabs-content {
      display: block;
    }
  }

  // {{< columns >}}
  .book-columns {
    gap: $padding-16;

    >div {
      margin: $padding-16 0;
      min-width: $body-min-width * 0.66;
    }

    >ul {
      list-style: none;
      display: flex;
      padding: 0;
      flex-wrap: wrap;
      gap: $padding-16;

      >li {
        flex: 1 1;
        min-width: $body-min-width * 0.66;
      }
    }
  }

  // {{< button >}}
  a.book-btn[href] {
    display: inline-block;
    font-size: var(--font-size-smaller);
    color: var(--color-link);
    line-height: $padding-16 * 2;
    padding: 0 $padding-16;
    border: $padding-1 solid var(--color-link);
    border-radius: var(--border-radius);
    cursor: pointer;

    &:hover {
      text-decoration: none;
    }
  }

  .book-hint {
    @each $name in (note, tip, important, warning, caution, default, info, success, danger) {
      &.#{$name} {
        border-color: var(--color-accent-#{$name});
        background-color: var(--color-accent-#{$name}-tint);
      }
    }
  }

  // {{< badge >}}
  .book-badge {
    @each $name in (note, tip, important, warning, caution, default, info, success, danger) {
      &.#{$name} {
        --accent-color: var(--color-accent-#{$name});
      }
    }

    display: inline-block;
    font-size: var(--font-size-smaller);
    font-weight: var(--body-font-weight);
    vertical-align: middle;
    border-radius: var(--border-radius);
    border: $padding-1 solid var(--accent-color);
    overflow: hidden;
    text-wrap: nowrap;
    color: var(--body-font-color);

    span {
      display: inline-block;
      padding: 0 $padding-8;
    }

    span.book-badge-value {
      color: var(--body-background);
      background-color: var(--accent-color);
    }
  }

  // {{< steps >}}
  .book-steps {
    position: relative;

    >ol {
      counter-reset: steps;
      list-style: none;
      padding-inline-start: $padding-16 + $padding-4;
      margin-top: $padding-16 * 2;

      >li::before {
        content: counter(steps);
        counter-increment: steps;

        position: absolute;
        display: flex;
        justify-content: center;
        left: $padding-8;

        height: $padding-16 * 1.5;
        width: $padding-16 * 1.5;
        padding: $padding-4;
        border-radius: $padding-8;

        white-space: nowrap;
        line-height: $padding-16;

        color: var(--body-background);
        background: var(--gray-500);
        outline: $padding-4 solid var(--body-background);
      }

      >li {
        @extend .markdown-inner;
        border-inline-start: $padding-1 solid var(--gray-500);
        padding-inline-start: $padding-16 * 3;
        padding-bottom: $padding-16 * 2;
      }

      >li:last-child {
        border: 0;
      }
    }
  }

  // {{< card >}}
  .book-card {
    display: block;
    overflow: hidden;
    height: 100%;
    border-radius: var(--border-radius);
    border: $padding-1 solid var(--gray-200);

    > a {
      display: block;
      height: 100%;

      &[href], &[href]:visited {
        color: var(--body-font-color);
      }

      &[href]:hover {
        text-decoration: none;
        background: var(--gray-100);
      }
    }

    > a > img, > img {
      width: 100%;
      display: block;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .markdown-inner {
      padding: $padding-16;
    }
  }

  // {{< image >}}
  .book-image {
    input + img {
      cursor: zoom-in;
      transition: transform 0.2s ease-in-out;
    }

    input:checked + img {
      position: fixed;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      background: var(--body-background);
      object-fit: contain;
      width: 100%;
      height: 100%;

      z-index: 1;
      cursor: zoom-out;
      padding: $padding-16;
    }
  }

  // {{< asciinema >}}
  .book-asciinema {
    margin: $padding-16 0;
  }

  .book-hero {
    min-height: $padding-16 * 24;
    align-content: center;

    h1 {
      font-size: 3em;
    }
  }

  .book-codeblock-filename {
    background: var(--gray-100);
    border: $padding-1 solid var(--gray-200);
    border-bottom: 0;
    font-size: var(--font-size-smaller);
    margin-top: $padding-16;
    padding: $padding-4 $padding-8;
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);

    a {
      color: var(--body-font-color);
    }

    + .highlight pre {
      margin-top: 0;
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
  }
}