@import "./vendor/normalize";
@import "./vendor/normalize-ext";
@import "./common/foundation/base";
@import "./color_definitions";
@import "./common/components/buttons";

article.post {
  border-bottom: 1px solid var(--primary-low);

  img.avatar {
    border-radius: 50%;
  }

  &.deleted {
    background-color: var(--danger-low);
  }

  .quote .title {
    border-left: 5px solid var(--primary-very-low);
    padding: 10px 10px 0 12px;
    .avatar {
      margin-right: 7px;
    }
  }

  ol,
  ul {
    clear: none;
  }

  blockquote {
    padding: 10px 8px 10px 13px;
    margin: 0 0 10px 0;
    border-left: 5px solid var(--primary-very-low);
    p {
      margin: 0 0 10px 0;
    }
    p:last-of-type {
      margin-bottom: 0;
    }
  }

  .post-date {
    float: right;
    color: var(--primary-low-mid);
    font-size: var(--font-down-1);
    margin: 10px 4px 0 0;
  }

  .author {
    padding: 10px 5px;
    float: left;

    img {
      max-width: 45px;
      border-radius: 50%;
    }
  }

  .cooked {
    padding: 10px 0;
    margin-left: 65px;
    word-wrap: break-word;
    word-break: break-word;

    pre {
      white-space: pre-wrap;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    p {
      margin: 0 0 1em 0;
    }
  }
}

.username {
  font-size: var(--font-down-1);
  margin: 0 0 10px 0;

  a {
    color: var(--primary-high);
  }
  a.staff {
    background-color: var(--highlight-low);
  }

  a.new-user {
    color: var(--primary-low-mid);
  }

  span.title {
    font-weight: normal;
    color: var(--primary-medium);
  }
}

img.emoji {
  width: 20px;
  height: 20px;
}

.in-reply-to {
  font-size: var(--font-down-1);
  text-align: center;
  margin: 10px 20px 6px 0;
  float: right;
  color: var(--tertiary);
}

.replies {
  font-size: var(--font-0);
  color: var(--primary-medium);
}

.clearfix {
  clear: both;
}

header.discourse {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 8px;
  font-size: var(--font-up-2);
  border-bottom: 3px solid var(--primary-low);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  h3 {
    margin: 0 auto 0 0;
    font-size: var(--font-0);
  }
}

.embed-error {
  padding: 0 10px;
}

footer {
  font-size: var(--font-up-2);
  margin-top: 0.5em;
  .button {
    color: white;
    padding: 6px 8px;
    background-color: var(--tertiary);
    display: inline-block;
  }
}

.logo {
  float: right;
  max-height: 30px;
}

// load onebox CSS at the end
@import "./common/base/onebox";

// we apparently use bottom margins on paras in the embed CSS, leading to weirdness
// which we will now clean up
aside.onebox {
  margin-bottom: 20px;
  p {
    margin-bottom: 0 !important;
  }
}

// images large enough for the lightbox wrapper don't have bottom margins
// either, unless we add one now
div.lightbox-wrapper {
  margin-bottom: 20px;
}

.new-topic-btn {
  margin: 0.5rem;

  &:hover {
    background: var(--tertiary-hover);
  }

  span {
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 2px;
  }

  .new-topic-btn__icon {
    width: 16px;
    height: 16px;
    margin-right: 2px;
    background-image: svg-uri(
      '<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 448 512" fill="white"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>'
    );
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
  }
}

.topics-list {
  width: 100%;

  .topic-list-item {
    clear: both;

    .main-link {
      border-bottom: 1px solid var(--primary-low);
      padding: 0.5rem;
      width: 100%;

      a {
        color: var(--primary);
      }

      a:visited {
        color: var(--primary-medium);
      }
    }

    .topic-column-wrapper {
      display: flex;

      .topic-column.details-column {
        flex-direction: column;
        width: 80%;

        .topic-last-posted-at,
        .topic-author-avatar-timestamp,
        .topic-stats {
          padding-top: 5px;
        }

        .topic-author-avatar-timestamp img {
          max-height: 20px;
        }

        .topic-created-at {
          padding-left: 5px;
          vertical-align: middle;
        }

        .topic-last-posted-at,
        .topic-created-at,
        .topic-stats {
          color: var(--primary-medium);
        }
      }

      .topic-column.featured-image-column {
        .topic-featured-image img {
          max-width: 200px;
          max-height: 100px;
        }
      }
    }
  }
}