@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";

.post {

  ol,
  ul {
    padding-left: 4rem;
  }

  .content {
    @include margin-auto();

    &:after {
      clear: both;
      content: "";
      display: block;
    }
  }

  .footer {
    max-width: $layout-post-width;
    @include padding(0, 0.5);
    @include margin-auto();
  }

  .comments {
    max-width: $layout-post-width;
    @include padding(0, 0.5);
    @include margin-auto();
  }

  .button {
    border: 1px solid $color-gray-border;
    border-radius: $button-border-radius;
    color: $color-base;
    display: block;
    font-size: $typographic-base-font-size;
    font-weight: normal;
    height: $button-height;
    line-height: $button-height;
    margin-left: auto;
    margin-right: auto;
    max-width: 90px;
    text-align: center;
    @include padding(0, 1);
    @include margin-top(1);

    &:hover,
    &:focus {
      color: $color-primary;
    }
  }
}

@include breakpoint-md {
  .post {
    .footer {
      @include padding-equal(0);
    }

    .comments {
      @include padding-equal(0);
    }

    .button {
      left: 30px;
      max-width: none;
      position: fixed;
      top: 30px;
      @include margin-equal(0);
    }
  }
}