/**
 * Site-Wide Search Form
 * 1. No padding-left; taken care of by the child .search__icon-container's
 *    padding-left.
 *TODO: Kinda silly looking at the moment. Try to clean it up in a later pass.
 */
.search {
  @include    rounded-corners(0.25rem);
  background : $dark-background;
  color      : $inverted-font;

  padding : 0.25rem 0.25rem 0.25rem 0;  /* 1 */
  margin  : 0.25rem;
}



/**
 * Search Bar Icon Container
 * Very (very) similar to the .content-menu__icon-container
 * 1. Padding to the left of the iconograph (the margin of the .search element
 *    must also be taken into consideration here.)
 * 2. Padding between the iconograph and the '|'
 * 3. No margin-right (for the padding to the right of the '|'); taken care of
 *    by the sibling .search__input's padding-left
 * 4. Normalize widths of the iconographs.
 * 5. padding-top/-bottom needs to be equal to the padding-top/-bottom of the
 *    .search__input element s.t. the items will remain level.
 */
.search__icon-container {
  text-align  : right;
  padding     : 0.25rem 0;  /* 5 */

  margin-left : 0.75rem;    /* 1 */

  &:before {
    display       : inline-block;
    width         : 1.25rem; /* 4 */
    padding-right : 0.5rem;  /* 2 */
  }
}



/**
 * Search Input Box
 * 1. Don't render any kind of background or ugly looking borders.
 * 2. This element is assumed to be wrapped in it's own, special little
 *    inline-block element so that we can freely have it consume the full width
 *    of that element, without pushing any floated elements off of its line.
 * 3. No padding-right; taken care of by the parent .search element.
 * 4. padding-top/-bottom needs to be equal to the padding-top/-bottom of the
 *    .search__icon-container element s.t. the items will remain level.
 *TODO: Make sure the placeholder text renders correctly in all major browsers
 */
.search__input {
  border     : none;         /* 1 */
  background : transparent;  /* 1 */
  width      : 100%;         /* 2 */

  @include    rounded-corners(0.25rem);
  padding    : 0.25rem 0  0.25rem 0.25rem;  /* 3, 4 */

  transition : background 200ms ease-in,
               color      200ms ease-in;

  &:focus {
    background : $darker-background;
    color      : $inverted-font;
  }

  &::placeholder {
    color : $gray-85;
  }
}