/*!
 * Font Awesome Icon Picker
 * https://farbelous.github.io/fontawesome-iconpicker/
 *
 * @author Javi Aguilar, itsjavi.com
 * @license MIT License
 * @see https://github.com/farbelous/fontawesome-iconpicker/blob/master/LICENSE
 */
@import 'variables.less';
@import 'popovers.less';

.iconpicker {
  * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
  }
  position: relative;
  .clearfix();
  text-align: left;
  text-shadow: none;
  line-height: 0;
  display: block;
  margin: 0;
  overflow: hidden;

  .iconpicker-items {
    position: relative;
    .clearfix();
    clear: both;
    float: none;
    padding: @base_spacing 0 0 @base_spacing;
    background: #fff;
    //margin:0 -@base_spacing -@base_spacing 0;
    //width:@picker_width - (@base_spacing*2);
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    min-height: @row_outer_height;
    max-height: (@row_outer_height * @num_rows) + 1;

  }

  .iconpicker-item {
    float: left;
    width: @item_size;
    height: @item_size;
    padding: @base_spacing;
    margin: 0 @base_spacing @base_spacing 0;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    font-size: @item_size;
    .outer-border();
    color: inherit;
    &:hover:not(.iconpicker-selected) {
      background-color: @hover_bg;
    }
    &.iconpicker-selected {
      box-shadow: none;
      color: #fff;
      background: #000;
    }
    /*&:nth-child(4n+4) {
        margin-right: 0;
    }
    &:nth-last-child(-n+4) {
        margin-bottom: 0;
    }*/
    //box-shadow:0;
  }
}

.iconpicker-component {
  cursor: pointer;
}