@use "src/assets/styles/mixins";
@use "src/assets/styles/variables";

.postContent {
  max-width: variables.$layout-post-single-width;
  @include mixins.margin-auto();
  @include mixins.padding(0, 0.5);

  .title {
    font-size: variables.$typography-base-font-size * 2;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    max-width: variables.$layout-post-width;
    text-align: center;
    @include mixins.line-height(1.65);
    @include mixins.margin-top(1);
    @include mixins.margin-bottom(0);
  }

  .body {
    figure {
      @include mixins.margin-bottom(1);

      blockquote {
        font-style: italic;
        text-align: center;
        @include mixins.margin-top(0);
        @include mixins.padding(1, 0);

        p {
          font-size: variables.$typography-base-font-size * 1.6817;
          max-width: variables.$layout-post-width;
          @include mixins.margin-top(0);
          @include mixins.margin-bottom(1);
          @include mixins.line-height(1.5);
        }
      }
    }

    a {
      text-decoration: underline;
    }

    * {
      margin-left: auto;
      margin-right: auto;
      max-width: variables.$layout-post-width;
    }

    h2 > a {
      visibility: hidden;

      & > svg {
        fill: hsl(var(--color-foreground));
      }
    }

    img {
      max-width: 100%;
    }
  }
}

@include mixins.breakpoint-lg {
  .postContent {
    @include mixins.padding-equal(0);

    .title {
      font-size: variables.$typography-base-font-size * 3;
      @include mixins.line-height(2.25);
      @include mixins.margin-top(2.25);
      @include mixins.margin-bottom(1.5);
    }

    .body {
      font-size: variables.$typography-base-font-size * 1.125;
      @include mixins.line-height(1.125);
      @include mixins.margin-bottom(1.125);

      p {
        font-size: variables.$typography-base-font-size * 1.125;
        @include mixins.line-height(1.125);
        @include mixins.margin-bottom(1.125);
      }

      h2 > a {
        visibility: unset;
        @include mixins.padding-right(0.5);
      }
    }
  }
}
