@import "common/foundation/variables";

.topic-post {
  article > .row {
    & > .topic-meta-data {
      width: 79%;
      .contents {
        text-align: left;
        padding-left: 3%;
        position: relative;
      }
      .names {
        z-index: 1;
        position: absolute;
        top: -2px;
        left: 10%;
        width: 100%;
      }
      h3, .user-title {
        display: inline;
        padding-left: 5px;
        font-size: $base-font-size;
        a {
            color: #6f6f6f;
            font-weight: bold;
        }
      }
    }
    & > .topic-body {
      width: 70.5%;
      margin-left: 7.5%;
      margin-top: -85px;
      border-top: none;
      padding-left: 10px;
      & > .contents {
        &.avoid-tab { padding-top: 0; }
        .topic-meta-data-inside, .avoid-tab .topic-meta-data-inside {
          margin-top: -52px;
        }
        .cooked, .avoid-tab .cooked {
          margin-top: 48px;
          z-index: 2;
        }
      }
    }
    & > .reply-to-tab {
      left: 9%;
      padding: 2px 12px;
      .avatar {
        height: 15px;
        width: 15px;
      }
    }
  }
  .embedded-posts {
    &.top {
      margin-left: 7.5%;
    }
    position: relative;
    .contents h5 {
      position: absolute;
      top: 12px;
      left: 93px;
      width: 500px;
      text-align: left;
      z-index: 1;
      font-size: $base-font-size;
    }
    .topic-body {
      margin-top: 15px;
      .topic-meta-data-inside {
        margin-top: -15px;
      }
    }
  }
}