//
// Post editor
// --------------------------------------------------


.posting-container {
  background: @form-panel-bg;
  border-top: 1px solid darken(@form-panel-border, 8%);
  border-width: 1px 0px;
  box-shadow: 0px 0px 0px 5px darken(@form-panel-shadow, 8%);
  padding: @form-panel-padding;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;

  position: fixed;
  bottom: -100%;
  width: 100%;
  z-index: 2;

  &.fixed {
    transition-duration: 0.5s;
    bottom: 0px;
  }

  .container {
    position: relative;
  }

  .lefthand {
    margin: 0px;
    position: absolute;
    left: @grid-gutter-width * -1;
    width: @grid-gutter-width;

    li {
      text-align: center;

      a {
        color: @state-default;

        &:hover, &:focus {
          color: @state-hover;
        }

        &:active, &.active {
          color: @state-clicked;
        }
      }

      button {
        background: none;
        border: none;

        color: @state-default;

        &:hover, &:focus {
          color: @state-hover;
        }

        &:active {
          color: @state-clicked;
        }
      }
    }
  }

  .thread-title {
    background: @input-bg;
    border: 2px solid @input-border;
    border-radius: @border-radius-large;
    margin-bottom: @line-height-computed / 2;

    input, select {
      border: none;
      .box-shadow(none);

      .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
    }
  }

  .thread-participants-input {
    margin-bottom: @line-height-computed / 2;
  }

  .editor-preview {
    border: 2px dashed @form-panel-border;
    border-radius: @border-radius-large;
    padding: 0px;

    .empty-message {
      padding: @padding-base-vertical @padding-base-horizontal;
    }

    .misago-markup {
      padding: @padding-base-vertical @padding-base-horizontal;
    }

    .preview-footer  {
      margin: 0px;
      padding: @padding-base-vertical @padding-base-horizontal;
    }
  }

  .form-main {
    padding: 0px;

    &>.form-control {
      margin-bottom: @line-height-computed / 2;
    }
  }

  .form-side {
    h3 {
      padding: 0px;
      margin: 0px;
      margin-bottom: @line-height-computed / 2;

      color: @text-muted;
      font-size: @font-size-base;
      font-weight: bold;
    }

    .supporting-form {
      margin-bottom: @line-height-computed / 2;
    }
  }

  .form-footer {
    background-color: @form-panel-footer-bg;
    border-top: 1px solid @form-panel-border;
    padding: @form-panel-padding;
    padding-left: 0px;
    padding-right: 0px;

    strong {
      margin-left: @line-height-computed / 2;
    }
  }
}