@import '../../scss/variables';

:host {
  .sky-contrib-list-filters-inline-bar {
    background-color: #e9f4fc;
    padding: 7px;
    padding-bottom: 8px;

    > button {
      background-color: #eee;
      border: 1px solid #ccc;
      cursor: pointer;
      display: inline-block;
      font-weight: bold;
      padding: 3px 7px;
      border-radius: 10px;
    }

    sky-contrib-list-filter-renderer {
      margin-right: 6px;
    }

    & + .sky-contrib-list-filters-modal-active {
      border-top: 1px solid #ccc;
    }
  }

  .sky-contrib-list-filters-modal-active {
    padding: 7px;
    border-bottom: 1px solid #ccc;
    font-size: $sky-font-size-md;

    .filter-label {
      font-weight: 600;
    }

    .filter-button {
      display: inline-block;
      background-color: $sky-color-blue-30;
      border: 1px solid $sky-color-blue-50;
      border-radius: 4px;
      padding: 5px;
      margin-right: 5px;
      cursor: pointer;

      .close {
        margin-left: 5px;
        text-shadow: 0 1px 0 #fff;
        opacity: .8;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

.filtered {
  border-color: #1ab394;
  color: #1ab394;
}