/**
* Quickreply and talkform tweaks:
* (To make them fit better with Foundation's odd form control styles.)
*/

@mixin hack-normal-button {
  @include button;
  @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color);
  @include inset-shadow();
}

@mixin hack-match-input-height {
  // Foundation sets input/select heights weirdly, and doesn't have a built-in
  // way to make nearby buttons not look janky. So copy that height logic.
  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
}

@mixin hack-normal-select {
  // Foundation likes stretching selects to 100% for some reason. It also
  // draws an artificial dropdown triangle we need to leave room for.
  width: auto;
  padding-right: 24px;
}

@mixin hack-smaller-select {
  width: auto;
  height: 1.6rem;
  padding: 0 24px 0 0.5rem;
}

@mixin hack-smaller-button {
  height: 1.6rem;
  padding: 0 0.5rem;
}

#qrformdiv {
  // Consistent Foundation styles for most buttons
  input[type="button"],
  button:not(#lj_userpicselect),
  input[type="submit"]:not(#submitpost) {
    @include hack-normal-button;
    margin-bottom: 3px;
  }

  #submitpost {
    @include inset-shadow();
  }

  // Clear unwanted extra button styles for icon browse button.
  #lj_userpicselect {
    border-radius: initial;
    box-shadow: initial;
  }

  // Foundation default (inline-block) gives worse wrapping on mobile for long labels.
  label {
    display: inline;
  }

  textarea {
    // Foundation hates textarea resizers
    max-width: unset;
    // Foundation sets height to "illegible chiclet," then unsets it with an
    // attribute selector on the "rows" attribute. Works fine, unless you're
    // browsing with a potato that doesn't understand attribute selectors.
    height: unset;
  }

  // Shrink subject a bit
  .qr-subject {
    input[type="text"] {
      height: 2.2rem;
      padding: 0.3em;
    }
  }

  .qr-meta {
    // Make .ljuser bigger ("font-size: smaller" looks more balanced on journal
    // styles, but unbalanced here due to big form fields and smaller body text).
    .ljuser {
      font-size: inherit !important;
    }
    // Make more options and icon controls smaller so they don't tower over the
    // icon preview.
    select {
      @include hack-smaller-select;
    }

    button, input[type="button"] {
      @include hack-smaller-button;
    }
  }

  .qr-markup {
    // Default form controls are too huge to go between subject and body.
    select {
      @include hack-smaller-select;
      vertical-align: top; // Lets the help link image triangulate properly.
    }

    button, input[type="button"] {
      @include hack-smaller-button;
      vertical-align: top;
    }
  }
}

/**
* Hack to make the "multiform" comment editing controls match site-skin without
* messing with the S2 markup
*/
#multiform_mode {
  @include hack-normal-select;
  vertical-align: top;
}

#multiform_submit {
  @include hack-normal-button;
  @include hack-match-input-height;
  vertical-align: top;
}