$padding-16: 1rem !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-1: 1px !default;

$body-min-width: 20rem !default;

$font-size-base: 16px !default;
$font-size-12: 0.75rem !default;
$font-size-14: 0.875rem !default;
$font-size-16: 1rem !default;

.book-expand {
  margin-top: $padding-16;
  margin-bottom: $padding-16;

  border: $padding-1 solid #e9ecef !important;
  border-radius: $border-radius;

  overflow: hidden;

  .book-expand-head {
    background: #f8f9fa;
    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 #e9ecef !important;
  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 #f8f9fa;
    padding: $padding-16;
    display: none;
  }

  input[type="radio"]:checked + label {
    background-color: #ffddf4;
    border-bottom: $padding-1 solid #ff27c3;
  }
  input[type="radio"]:checked + label + .book-tabs-content {
    display: block;
  }
  input[type="radio"]:focus + label {
    outline-color: #ff6666;
  }
  input.toggle {
    height: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    position: absolute;
  }
}

pre code {
  color: #667e84;
}