@import "../vars.scss";

.sk-filter-group {

  &-items {
    display: inline-block;

    &__title, &__list, &__value {
      display: inline-block;
    }

    &__title {
      font-weight: bold;

      &:after {
        content: ": ";
      }
    }

    &__value {
      padding-left: 4px;

      &:hover {
        text-decoration: line-through;
        cursor: pointer;
        color: $sk-remove-action-color;
      }

      &:after {
        display:inline-block;
        content: ", ";
      }

      &:last-child:after {
        content: "";
      }
    }

  }

  &__remove-action {
    display: inline-block;
    cursor: pointer;
    font-weight: $sk-bold-weight;
  }
}

.sk-action-bar {
  .sk-filter-groups {
    display: flex;
    flex-flow: row;
    margin: 0 10px 10px 0;
    color: $sk-action-text-color;
  }

  .sk-filter-group {
    border: none;
    background: $sk-selected-filters-background;
    display: inline-block;
    padding: 0 0 0 10px;
    font-size: $sk-list-font-size;
    line-height: 20px;
    border-radius: $sk-border-radius;
    margin-right: 10px;

    &-items {

      &__title {
        // color: #666;
        font-weight: $sk-light-weight;
      }

      &__list {
        padding:10px 0;
      }

    }

    &__remove-action {
      border-left:1px solid #ddd;
      padding: 0 15px 0 10px;
      margin-left:10px;
      font-size: 14px;

      &:hover {
        color: $sk-remove-action-color;
      }
    }
  }
}

.sk-layout__filters {
  .sk-filter-groups {
    display: block;
    width: 100%;
    margin-right: 10px;
    color: $sk-list-text-color;
  }

  .sk-filter-group {
    border: none;
    display: block;
    font-size: $sk-list-font-size;
    line-height: 20px;

    &__remove-action {
      padding-right: 10px;
    }
  }
}