ux-search-builder-group {
  .search-group-title {
    color: @search-builder-group-title-color;
    font-size: 19px;
    margin: 0 0 11px;
    font-weight: 400;
  }

  .search-group-content {
    display: flex;

    .search-group-operator {
      display: flex;
      align-items: center;
      flex: none;
      width: 100px;
      padding-left: 5px;
      text-transform: uppercase;
      color: @search-builder-operator-border;
      transition: opacity 300ms linear;
      border-left-width: 4px;
      border-left-style: solid;
      opacity: 1;

      &.search-group-operator-or {
        border-left-color: @search-builder-operator-or-border;
      }

      &.search-group-operator-and {
        border-left-color: @search-builder-operator-and-border;
      }

      &.search-group-operator-not {
        border-left-color: @search-builder-operator-not-border;
      }

      &.hidden-operator {
        opacity: 0;
      }
    }

    .search-group-items {
      flex: 1;

      .search-group-item-container {
        display: flex;
        padding: 5px;
        margin-right: 10px;
        transition: background-color 300ms linear;

        &:hover,
        &.search-group-item-focus {
          background-color: @search-builder-field-hover;

          .search-group-item-remove {
            opacity: 1;
          }
        }

        .search-group-item {
          flex: 1;
        }

        &.placeholder-item {
          pointer-events: none;

          .search-group-item {
            padding-right: 33px;

            .form-control {
              height: 34px;
              border: 1px dashed @search-builder-placeholder-border;
            }
          }
        }

        .search-group-item-remove {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: none;
          margin: 9px;
          border: none;
          padding: 0;
          opacity: 0;
          color: @search-builder-remove-color;
          background-color: transparent;
          cursor: pointer;
          transition: opacity 300ms linear;

          &:focus {
            .native-focus-outline();
          }
        }
      }
    }

    .search-builder-group-add-field {
      display: flex;
      flex: none;
      width: 135px;
      height: 30px;
      justify-content: flex-start;
      align-items: center;
      align-self: flex-end;
      cursor: pointer;
      margin-bottom: 5px;
      border: none;
      padding: 0;
      background-color: transparent;

      &:focus {
        .native-focus-outline();
      }

      .search-builder-group-add-field-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: none;
        font-size: 0.875rem;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 50%;
        color: @search-builder-add-icon-color;
        background-color: @search-builder-add-bg;
        transition: background-color 300ms linear;
      }

      .search-builder-group-add-field-label {
        font-size: 0.9375rem;
        max-width: 120px;
        padding-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: @search-builder-add-color;
      }

      &:hover {
        .search-builder-group-add-field-icon {
          background-color: @search-builder-add-hover-bg;
        }
      }
    }
  }

  .search-builder-group-divider {
    border-top-color: @search-builder-divider;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  &:last-of-type {
    .search-builder-group-divider {
      display: none;
    }
  }
}