/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 *
 * CSS Stylesheet for Participants in Conversation Panel head.
 *
 * author: hearnden@google.com (David Hearnden)
 */

/*
 * <div class='panel'>
 *   <div class='flow'>
 *     <div>
 *       <img class='participant'>
 *       ...
 *       <!-- Button must be sibling of imgs for Webkit to work. -->
 *       <span class='extra'>
 *         <span class='toggleGroup'>
 *           <span class='expandButton'></span>
 *           <span>more</span>
 *         </span>
 *         <span class='add'></span>
 *       </span>
 *       <span class='simple'>
 *         <span class='add'></span>
 *       </span>
 *     </div>
 *   </div>
 * </div>
 *
 *
        ________________________________________________________________
 *    ||        4     |              |       |   .simple   |            |
 *    ||     _________|     _________|       |             |14          |
 *    ||    |         |    |         |       |    ___33____|            |
 *    ||  4 |  42x42  |    |         |  ...  | 4 |         |24          |
 *    ||    |         |    |         |       |   |_________|            |
 *    ||____|_________|____|_________|_______|_____________|8___________|
 *    ||        4
 *    ||_______________________________________________________________
 *    |
 *    |.flow element keeps flowing with overflow.
 *    |
 *    |                                       _____________
 *    |                                      |   _  _______| .extra
 *    |                                      |  |+||_______| aligned to bottom
 *    |                                      |   __________| of .flow
 *    |                                      |  |          |
 *    |                                      |  |__________|
 *    |______________________________________|_____________|_____________
 *    V
 */

/*
 * Top-level element, toggles between fixed-height and autoheight.
 */
.panel {
  border-bottom: 1px solid #B8C6D9;
  border-left: 1px solid #E4F1FE;
  background-color: #c9e2fc;
  overflow: hidden;
  height: 46px;
  min-width: 110px;  /* 1 avatar, and nice room for buttons. */

  /*
   * Margins on adjacent floated elements do not collapse, so there is a
   * directional bias (i.e., can only have 1 horizontal and 1 vertical
   * margin to get a grid-like effect).  Arbitrarily, left and top have
   * been picked for avatar margins.  The container must therefore
   * provide right and bottom margins for the last row and column.
   * This is done with padding here rather than margin, in order to keep
   * the background color.
   */
  padding-bottom: 4px;
}

.flow {
  /* Expand to floated content. */
  overflow: auto;
  /* Positioned contained for add button. */
  position: relative;
  /* Room for absolutely positioned add button. */
  padding-right: 11em;
}

.participant {
  float: left;
  cursor: pointer;
}

/* Name-based rendering. */
div.participant {
  line-height: 44px;
  margin: 4px 0 0 12px;
  text-decoration: underline;
  color: blue;
}

/* Avatar-based rendering. */
img.participant {
  height: 40px;
  width: 40px;
  border: 1px solid #cad0d9;
  margin: 4px 0 0 4px;
}

.toggleGroup {
  position: absolute;
  top: 0;
  cursor: pointer;
  /* As narrow as possible. */
  line-height: 1;
}

/*
 * Expert trick.
 *
 * By floating all the images, and having the add button be an absolutely
 * positioned span (must be an inline element, not a div), the default
 * location of the span will be the first inline box generated by the
 * participant-container div, which occurs immediately after the last
 * floated image of the first line.  Note this does not work if the add
 * button is a div, because the containing-block rules are different for
 * default-inline and default-block elements.
 * See http://www.w3.org/TR/CSS2/visudet.html#containing-block-details
 */
.simple {
  position: absolute;
  /* Padding is used, so that background obscures the other one.
   * It must stretch to the full height of this block.  Values are same
   * as avatars, but offset by the height difference:
   *   (4px 0 0 4px) + (8px 0 8px 0) + (2px 0 0 0)border
   */
  padding: 14px 0 8px 4px;
  background-color: #c9e2fc;
  bottom: 0;
  width: 10em;
}

.extra {
  position: absolute;
  width: 4em;
  margin-left: 4px;

  /* Note that, due to borders and padding being scaled separately, the
   * theoretical 22px required here causes aliasing errors at some font
   * sizes (scale(x) + scale(y) != scale(x + y) in general).
   * Ideally, this value would sum to:
   *   1px border + 20px space + 1px border
   * (which is different from 2px border + 20px space).  21px regular
   * space is about as close as we can get to that value.  If the value
   * used here is too large, it causes some overflow errors (undesirabled
   * scroll bars) due to 1px aliasing.
   */
  padding-top: 21px;
}

.newWaveWithParticipantsButton {
  position: absolute;
  width: 7em;
  margin-left: 5px;
}

/*
 * Sprites.
 */

@sprite .expandButton {
  gwt-image: 'expandButton';
  /* Restore img-like flow.  Does not work on IE. */
  display: inline-block;
  margin-right: 0.3em;
}

@sprite .collapseButton {
  gwt-image: 'collapseButton';
  /* Restore img-like flow.  Does not work on IE. */
  display: inline-block;
  margin-right: 0.3em;
}

@sprite .addButton {
  gwt-image: 'addButton';
  /* The button is a span, to conform to HTML's backward schema. */
  display: inline-block;
  cursor: pointer;
}