.post {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  width: 80%;
  height: 90%;

  margin: 2% auto 5% auto;

  overflow-y: auto;

  background-color: var(--background-color);

  cursor: initial;

  &__actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;

    padding: 20px 50px 0;
    gap: 20px;
  }

  &__header {
    display: flex;
    flex-direction: column;
    padding: 20px 0 10px 0;
    width: 75%;
  }

  &__title {
    font-size: $header-size;

    &--read {
      color: var(--read-color);
    }
  }

  &__date {
    font-size: small;
  }

  &__author {
    font-size: small;
  }

  &__rule, &__category {
    background-color: var(--lightest-accent-color) !important;

    & a {
      color: $black;
    }
  }

  &__body {
    display:flex;
    flex-direction: column;

    padding: 10px 0 30px 0;
    width: 75%;

    & p {
      padding: 10px 0;
    }

    & h1, h2, h3 {
      margin: 20px 0 5px 0;
    }

    & img, video {
      padding: 10px 0;

      width: max-content;
      max-width: 100%;
    }

    & ul, ol {
      list-style-position: inside;
    }
  }

  &__close-button {
    background-color: var(--info-color);
    color: var(--font-color);

    & i {
      padding: 0 $fa-padding 0 0;
    }
  }

  &__meta-info {
    display: flex;
    flex-direction: row;
    align-items: center;

    margin: 15px 0;
    gap: 10px;
  }
}
