.sb-prominent-filter {
  background: $sb-prominent-filter-background-color;
  padding: 8px 0px 0px 0px;

  .sb-prominent-filter-header {
    font-weight: $sb-prominent-filter-header-font-weight;
    margin: $sb-prominent-filter-header-margin;
  }

  .sb-data-driven-filter-header {
    font-weight: $sb-prominent-filter-header-font-weight;
    color: $sb-prominent-filter-header-color;
  }

  .sb-prominent-filter-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    .sb-prominent-filter-field {
      margin: 0 0 $sb-prominent-filter-field-bottom-spacing 0;
      padding: 0 $sb-prominent-filter-field-side-spacing 0 0;
      width: $sb-prominent-filter-field-width-above-lg;

      &:last-child {
        margin-top: auto;
        margin-left: auto;
        text-align: right;
        padding-right: 0;
      }

      label {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: $sb-prominent-filter-field-label-margin;
        font-weight: $sb-prominent-filter-field-label-font-weight;
        font-size: $sb-prominent-filter-field-label-font-size;
        color: $sb-prominent-filter-field-label-color;
      }

      .topic-picker-selector {
        font-size: $sb-prominent-filter-field-font-size;
        color: $sb-prominent-filter-field-color;
        border: $sb-prominent-filter-field-border;
        border-radius: $sb-prominent-filter-field-border-radius;
        width: $sb-prominent-filter-field-width;
        height: $sb-prominent-filter-field-height;
        padding: $sb-prominent-filter-field-input-padding;
      }

      .ui.selection.dropdown {
        min-width: $sb-prominent-filter-field-width;
        width: $sb-prominent-filter-field-width;
        height: $sb-prominent-filter-field-height;
        font-size: $sb-prominent-filter-field-font-size;
        border-radius: $sb-prominent-filter-field-border-radius;
        padding: 0;
        display: flex;
        .divider{
          margin: 0;
        }
        .item {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: $sb-prominent-filter-field-width;
          padding: $sb-prominent-filter-dropdown-font-size;
          color: $sb-prominent-filter-field-color;
          font-size: $sb-prominent-filter-field-font-size;

          &.header {
            margin: 0;
            font-weight: $sb-prominent-filter-dropdown-header-font-weight;
          }

          &.active {
            color: $sb-prominent-filter-dropdown-item-active-color;
            font-weight: $sb-prominent-filter-dropdown-item-active-font-weight;
          }
          &:hover{
            background: $primary-250;
            color: $blue;
          }
          i.icon.square.outline{
            height: ($base-block-space * 2);
            width:  ($base-block-space * 2);
            border: 1px solid $primary-300;
            border-radius: 5px;
            &::before{
              content: "\f14a";
              visibility: hidden;
            }
            &.check{
              background: $blue;
              border: none;
              color: $sb-prominent-filter-background-color;
              &::before{
                content: "\2713";
                line-height: ($base-block-space * 2);
                visibility: visible;
              }
            }
          }
        }

        .text {
          text-transform: lowercase;
          text-overflow: ellipsis;
          overflow: hidden;
          color: $sb-prominent-filter-field-color;
          margin: 0;
          padding: $sb-prominent-filter-field-input-padding;
          font-size: $sb-prominent-filter-field-font-size;
          &::first-letter {
            text-transform: uppercase;
          }
        }
      }

    }
  }
}
.sb-prominent-filter.sb-bg-color-gray-0 .sb-prominent-filter-container .sb-prominent-filter-field .ui.selection.dropdown{
    background: $white;
    border: 0.5px solid #9999;
}

// responsive

@include respond-above(lg) {
  .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
    width: $sb-prominent-filter-field-width-above-lg;

    &:nth-child(5n+5) {
      padding-right: 0;
    }
  }

  *[dir="rtl"] {
    .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field{
      &:nth-child(5n+5) {
        padding-right: $sb-prominent-filter-field-side-spacing;
      }
      &:nth-child(5n+1) {
        padding-right: 0;
      }
      &:last-child {
        padding-right: $sb-prominent-filter-field-side-spacing;
        margin-right: auto;
        margin-left: 0;
        text-align: left;
      }
    }
  }
}

@include respond-between(md, lg) {
  .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
    width: $sb-prominent-filter-field-width-above-md;

    &:nth-child(4n+4) {
      padding-right: 0;
    }
  }

  *[dir="rtl"] {
    .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
      &:nth-child(4n+4) {
        padding-right: $sb-prominent-filter-field-side-spacing;
      }
      &:nth-child(4n+1) {
        padding-right: 0;
      }
      &:last-child {
        padding-right: $sb-prominent-filter-field-side-spacing;
        margin-right: auto;
        margin-left: 0;
        text-align: left;
      }
    }
  }
}

@include respond-between(sm, md) {
  .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
    width: $sb-prominent-filter-field-width-above-sm;

    &:nth-child(3n+3) {
      padding-right: 0;
    }
  }

  *[dir="rtl"] {
    .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
      &:nth-child(3n+3) {
        padding-right: $sb-prominent-filter-field-side-spacing;
      }
      &:nth-child(3n+1) {
        padding-right: 0;
      }
      &:last-child {
        padding-right: $sb-prominent-filter-field-side-spacing;
        margin-right: auto;
        margin-left: 0;
        text-align: left;
      }
    }
  }
}

@include respond-below(sm) {
  .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
    width: $sb-prominent-filter-field-width-below-sm;

    &:nth-child(2n+2) {
      padding-right: 0;
    }
  }

  *[dir="rtl"] {
    .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field {
      &:nth-child(2n+2) {
        padding-right: $sb-prominent-filter-field-side-spacing;
      }
      &:nth-child(2n+1) {
        padding-right: 0;
      }
      &:last-child {
        padding-right: $sb-prominent-filter-field-side-spacing;
        margin-right: auto;
        margin-left: 0;
        text-align: left;
      }
    }
  }
}