$dropdown-width: 250px;
$dropdown-height: 200px;
$dropdown-padding: 1rem;
$dropdown-box-shadow: 0 0 28px rgba(0, 0, 0, 0.1);

$item-width: 40px;
$item-height: 40px;
$item-border: 1px solid #b2b2b273;
$item-margin: .1rem;

$selected-background-color: #007eff;
$selected-color: #fff;

.iconpicker-dropdown {
  visibility: hidden;
  opacity: 0;

  &.show {
    visibility: visible;
    opacity: 1;
  }

  ul {
    position: absolute;
    width: $dropdown-width;
    height: $dropdown-height;
    background: #fff;
    overflow: scroll;
    box-shadow: $dropdown-box-shadow;
    padding: $dropdown-padding;
    z-index: 999;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    left: 0;
    list-style: none;

    li {
      width: $item-width;
      height: $item-height;
      line-height: $item-height;
      text-align: center;
      border: $item-border;
      cursor: pointer;
      margin: $item-margin;

      &.selected {
        background-color: $selected-background-color;
        color: $selected-color;
      }

      &.hidden {
        display: none;
      }
    }
  }
}