@import "../colors.less";
@import "../base.less";

@content-padding: 60px;

body {
  background: @off-white;
}

li {
  margin-bottom: 0;
}

.cooked img {
  width: auto;
  height: auto;

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

aside.onebox .onebox-body img.thumbnail {
  max-width: 60px;
  max-height: 60px;
}

.cooked p {
  margin: 1em 0;
}

#main {
  width: 1100px;
  background: white;
  margin: 0 auto;
}

.page-nav {
  background: @darker-grey;
  color: @grey-secondary;
}

.wrap {
  max-width: none;
  padding: 0;
}

#main-outlet {
  padding: @content-padding;
}

#topic-title {
  padding-top: 0;
}

.d-header {
  background: @blue-primary;
  box-shadow: none;
  margin-bottom: 0;

  height: 70px;
  position: absolute;
  top: -70px;
  right: 0;
  left: auto;
  width: 175px;

  > .wrap {
    width: 100%;
    margin: 0;
  }

  #site-logo {
    width: 64px;
    height: 64px;
  }

  .extra-info-wrapper {
    padding-left: 0;

    .category-name {
      color: white;
    }
  }

  .d-header-icons {
    height: 40px;
    margin: 14px;

    .icon {
      background: @blue-primary;
      margin-left: 8px;
      padding: 0;
      border: 0;
      transition: none;
      border-radius: 50%;

      .d-icon {
        color: white;
      }

      &:hover, &:focus {
        border: 0;

        .d-icon {
          color: white;
        }
      }

      &:hover {
        background: @blue-secondary;
      }
    }

    .active .icon {
      background: @blue-secondary;
      border: 0;

      &:after {
        display: none;
      }

      .d-icon {
        color: white;
      }
    }

    .current-user .icon:hover {
      background: transparent;

      .avatar {
        border: 5px solid @blue-secondary;
        box-sizing: content-box;
      }
    }

    img.avatar {
      width: 32px;
      height: 32px;
    }

    .svg-icon {
      width: 24px;
      height: 24px;
    }
  }

  .title {
    display: none;
  }

  .title a, .topic-link {
    color: white;

    &:visited {
      color: white;
    }
  }

  // topic title
  .extra-info {
    &:not(.two-rows) {
      // fix vertical centering
      min-height: initial;
    }
  }
}

.btn, .nav-pills > li > a {
  padding: 8px;
  font-size: 18px;
  font-family: 'Roboto Slab', serif;
  transition: none;
}

h2, h3 {
  margin: 0;
  margin-bottom: 0.5rem;
}

.select-kit {
  border: 0 !important;

  .select-kit-header {
    padding: 8px;
    font-size: 18px;
    height: 34px;
    transition: none;

    &.is-focused {
      box-shadow: none !important;
    }
  }
}

.topic-list {
  button.bulk-select {
    margin-right: 10px;
  }

  th.bulk-select, td.bulk-select {
    text-align: center;

    input {
      margin: 0;
    }
  }

  th.bulk-select button.bulk-select {
    margin-right: 0;
  }

  td.bulk-select + .main-link {
    padding-left: 5px;
  }

  .bulk-select-topics {
    button {
      line-height: 14px;
      margin: -5px 0;
    }
  }
}

.topic-post .row {
  display: flex;
  flex-direction: row;
}

@avatar-width: 45px;

.topic-avatar {
  float: none;
  width: @avatar-width;
}

// .post-notice, .topic-body {
//   float: none;
//   max-width: none;
//   flex-grow: 1;
// }

// .topic-body {
//   // this hack combined with flex-grow: 1 fills the flex container without
//   // letting it overflow
//   width: 0;
// }

.post-notice {
  background: @highlight;
  margin-bottom: 8px;
  border-top: 0;
}

.badge-wrapper.box {
  font-size: 14px;

  // somehow this is the only way i can find to vertically align the text :|
  line-height: 20px;
  height: 20px;
  padding: 0 5px 22px !important;
}

.timeline-container {
  margin-left: 800px;

  color: @grey-primary;

  .btn {
    background: @off-white;

    &, .d-icon {
      color: @grey-primary;
    }

    &:hover {
      background: @offer-white;

      &, .d-icon {
        color: @grey-primary;
      }
    }
  }

  .topic-timeline {
    .timeline-scrollarea {
      border-color: @grey-secondary;
    }

    .timeline-handle {
      background-color: @grey-primary;
    }

    .timeline-controls, .timeline-footer-controls {
      button {
        width: 34px;
        height: 34px;

        &.is-focused {
          outline: none;
        }
      }

      .popup-menu {
        width: 250px;

        button {
          width: 100%;
        }

        .btn {
          background: @off-white;

          &, .d-icon {
            color: @dark-grey;
          }

          &:hover {
            background: @offest-white;

            &, .d-icon {
              color: @dark-grey;
            }
          }
        }
      }
    }
  }
}

.footer-message h3, .suggested-topics-message {
  font-family: inherit;
}

.btn, .btn .d-icon {
  transition: none;
}

// allow content to consume full height
body:before, body:after, #svg-sprites {
  display: none;
}
