/*-- Layout Formatting --*/
.inline { display: inline; }
.inline-block { display: inline-block; }
.right { float: right; }
.left { float: left; }
.centered { text-align: center; }
.centered-text { text-align: center; }
.clear { @include clearfix; }
.show-mobile { display: none; @include media($mobile) { display: inline-block; } }
.hide-mobile { @include media($mobile) { display: none !important; } }
.padding-top { padding-top: 1rem; }

/*-- Banner Message Layout --*/
.banner-container {
  @include row;
  .banner {
    @include span-columns(6);
    margin-bottom: 1rem;
    &:only-child { @include span-columns(12); }
    &.warning { @include label(warning, 0.8rem); }
    &.error { @include label(error, 0.8rem); }

    @include media($mobile) {
      @include span-columns(8);
      margin-bottom: 0.5rem;
      &:last-child { margin-bottom: 1rem; }
    }
  }
}

/*-- Shared Page Header Layout (Threads and Posts View) --*/
.page-header-split {
  @include row;
  margin-bottom: 1rem;
  div:first-child {
    @include span-columns(6);
    color: $sub-header-font-color;
    h4 { color: $sub-header-font-color; font-weight: bold; display: inline; }
    input { margin-bottom: 0.5rem; @include transition(none); }
    button { @include span-columns(6); margin-bottom: 0;}
    button:last-child { @include omega; }
  }
  div:not(:first-child) {
    @include span-columns(6);
    @include omega;
    pagination { float: right; }
    &.moderators {
      @include span-columns(12);
      @include omega;
      .label { font-weight: bold; color: $sub-header-secondary-font-color; }
    }
  }

  @include media($mobile) {
    text-align: center;
    h4 { font-size: 1.4rem; }
    div:first-child, div:not(:first-child) {
      @include span-columns(8);
      @include omega;
      pagination { display:inline-block; float: none; }
    }
  }
}

/* -- Input Layout --*/
.input-section {
  position: relative;
  margin-bottom: 1.875rem;
  input {
    margin-bottom: 0;
    &.icon-padding { padding-right: 40px; }
  }
  button, .button { margin-bottom: 0; }
  &:last-child {margin-bottom: 0px; }
  .input-error { margin-top: -1.5625rem; }
  .invalid { color: rgba(206, 4, 6, 0.64); }
  .valid { color: rgba(27, 196, 63, 0.64); }
  .input-icon {
    cursor: text;
    font-size: 1.25rem;
    position: absolute;
    z-index: 99999;
    bottom: 0.5rem;
    right: 0.8rem;
  }
}
.input-nine-three-col {
  @include omega(2n);
  div:first-child { @include span-columns(9); }
  div:last-child { @include span-columns(3); }
}
.input-two-col {
  @include omega(2n);
  div { @include span-columns(6); }
}
.input-three-col {
  @include omega(3n);
  div { @include span-columns(4); }

  @include media($mobile) {
    div { @include span-columns(8); @include omega; }
  }
}

/*-------------- Admin Panel - Global Components -------------- */

.button-container {
  @include clearfix;
  @include row;
  .half-button { @include span-columns(6); @include omega(2n); }
}

.user-search {
  @include span-columns(6); @include omega;

  @include media($mobile) { @include span-columns(8); @include omega; }
}

.mobile-buttons {
  & button { margin: 0; }

  @include media($mobile) {
    @include fill-parent;
    @include row;
    @include pad(1rem 0 0 0);
    button { @include span-columns(8); @include omega; margin: 0; margin-bottom: 1rem; }
    & button:last-child { margin-bottom: 0; }
  }
}
