hugo-book/assets/_shortcodes.scss

.markdown {

  // {{< expand "Label" "icon" >}}
  .book-expand {
    margin-top: $padding-16;
    margin-bottom: $padding-16;

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

    overflow: hidden;

    .book-expand-head {
      background: var(--gray-100);
      padding: $padding-8 $padding-16;
      cursor: pointer;
    }

    .book-expand-content {
      display: none;
      padding: $padding-16;
    }

    input[type="checkbox"]:checked+.book-expand-content {
      display: block;
    }
  }

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

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

    overflow: hidden;

    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;
    }

    input[type="radio"]:focus+label {
      @include outline;
    }
  }

  // {{< 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: $font-size-14;
    color: var(--color-link);
    line-height: $padding-16 * 2;
    padding: 0 $padding-16;
    border: $padding-1 solid var(--color-link);
    border-radius: $border-radius;
    cursor: pointer;

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

  // {{< hint >}}
  .book-hint {
    @each $name, $color in $hint-colors {
      &.#{$name} {
        border-color: $color;
        background-color: rgba($color, 0.1);
      }
    }
  }

  // {{< badge >}}
  .book-badge {
    display: inline-block;
    font-size: $font-size-14;
    font-weight: $body-font-weight;
    vertical-align: middle;
    border-radius: $border-radius;
    overflow: hidden;
    text-wrap: nowrap;
    color: var(--body-font-color);

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

    span.book-badge-title {
      --background-opacity: 0.1;
    }

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

    @each $name, $color in $hint-colors {
      &.#{$name} span {
        background-color: rgba($color, var(--background-opacity));
      }
    }
  }

  // {{< 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 >}}, {{< figure >}}
  .book-card, figure {
    display: inline-block;
    overflow: hidden;
    height: 100%;
    border-radius: $border-radius;
    border: $padding-1 solid var(--gray-200);
    
    &[href], &[href]:visited {
      color: var(--body-font-color);
    }
    &[href]:hover {
      text-decoration: none;
      background: var(--gray-100);
    }

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

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

    figcaption {
      @extend .markdown-inner;
      padding: $padding-16;
    }
  }

  .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;
    }
  }

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

    h1 {
      font-size: 3em;
    }
  }
}