.filters {
  position: relative;
  height: 30px;
  padding: 6px;
  h5 {
    @include cell;
    width: 170px;
    margin: 0;
  }
  ul {
    margin: 0;
  }
  li {
    display: inline-block;
    list-style-type: none;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.checkbox-filters {
  height: 50px;
  display: flex;
  align-items: center;
  ul {
    margin: 0;
    li {
      list-style-type: none;
      display: inline-block;
      margin-right: 15px;
    }
  }
}

.drop-down-filters,
.filters {
  z-index: 2;
  .wrapper {
    height: 170px;
    @include run-transition(height);
    overflow: hidden;
    position: absolute;
    background: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  }
  .wrapper.hide {
    height: 0;
    box-shadow: none;
  }
  p:first-child,
  .filters-icons {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000;
  }
  .filters-icons::after {
    content: " ";
    width: 100%;
    float: left;
  }
  ul {
    margin-top: 0;
    box-sizing: border-box;
    padding: 8px;
    li {
      display: inline;
      color: #000;
      label {
        padding: 6px;
        float: left;
        width: 99px;
        i {
          margin-left: auto;
          margin-right: auto;
          float: none !important;
          opacity: 0.2;
          @include run-transition(opacity);
          cursor: pointer;
          display: inline-block;
        }
      }
      p {
        text-align: center;
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
      }
    }
    li.selected {
      i {
        opacity: 1;
      }
    }
    input[type="checkbox"] {
      visibility: hidden;
      position: absolute;
    }
  }
  i.draft {
    @include icon(draft, 99px);
    cursor: pointer;
  }
  i.submitted {
    @include icon(submitted, 99px);
    cursor: pointer;
  }
  i.published {
    @include icon(published, 99px);
    cursor: pointer;
  }
}