@mixin center-block($width: 85%, $mobile-width: 90%) {
  width: $width;
  margin: 0 auto;
  max-width: $width;
  min-width: $width;

  @include touch {
    max-width: $mobile-width;
    min-width: $mobile-width;
    width: $mobile-width;
  }
}

div.block-image,
div.block-mermaid {
  figcaption {
    font-size: 85%;
    margin-top: 5px;
  }

  figure {
    @include center-block;
  }
}

.content > div[class^="block-"] {
  &:not(:last-child) {
    margin-bottom: $content-block-margin-bottom;
  }
}

div.block-embed {
  lite-youtube {
    @include center-block(50%);
  }
}

div.block-tangent {
  .inner {
    margin: math.div($content-block-margin-bottom, 4) 0;
    padding-left: 1.5rem;
  }
}

div.block-mermaid {
  text-align: center;

  img {
    width: unset;

    @include dark-mode {
      filter: invert(100%);
    }
  }
}

div.block-code {
  .filename {
    font-family: $family-code;
    background-color: $grey-lighter;
    font-size: 1rem;
    position: relative;
    text-align: right;
    transform: translateY(100%) translateX(-100%);
    display: inline-block;
    left: 100%;
    padding: 0.25rem 1rem;
    border-radius: 0 0 0 $radius-large;
    box-shadow: $shadow;

    @include dark-mode {
      background-color: $grey-darker;
    }
  }

  .highlight {
    pre,
    span,
    & {
      @include dark-mode;
    }
  }
}

div.block-table {
  td,
  th {
    vertical-align: middle;

    @include dark-mode {
      color: $dark-mode-text;
    }
  }
}