/*
 * Mixins for form elements
 */

.find-container(@width: 200px) {
  padding: 5px;

  .find:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25px;
    background: url(../images/16x16/search.png) no-repeat 4px;
    -webkit-filter: grayscale(85%);
    filter: grayscale(85%);
    filter: gray;
    opacity: .5;
  }

  .find {
    position: relative;
    width: @width;
    vertical-align: middle;

    input {
      width: 100%;
      height:@input-line-height;
      line-height:@input-line-height;
      padding:0 5px 0 25px;
      border: 1px solid #DDD;
      .border-radius(@radius);
    }
    .clear {
      position: absolute;
      height:@input-line-height;
      line-height:@input-line-height;
      cursor: pointer;
      right: 0;
      opacity: 0.5;
      font-weight: bold;
      display:block;
      padding:0 7px;
    }
    .clear:hover {
      opacity: 1.0;
    }
  }
}