.SearchFields {
  font-weight: bold;
  position: relative;
  .Text.is-m;

  .Widget-title {
    margin-bottom: 0;
  }

  .SearchFields-heading {
    .Text.is-s;

    margin: 0;
  }

  &-tab {
    &-ul {
      .TabBar;
    }
    .TabBar-item;

    &-container {
      margin: 0 calc(0px - var(--Widget-padding));
    }

    &-button {
      background: transparent;
      border: none;
      color: var(--color-gray6);
      display: inline-block;
      padding: 0;
      text-decoration: none;
    }
  }

  &-container {
    display: flex;
    margin-bottom: calc(0px - calc(var(--gap-l) + var(--Widget-padding)));
    margin-top: var(--gap-m);
    width: 100%;

    .SearchFields {
      &-divider {
        background: var(--color-gray2);
        height: inherit;
        width: 1px;
      }

      &-hide,
      &-displayContainer {
        flex-grow: inherit;
        width: 50%;

        .RCIG-list {
          height: inherit;
          padding-bottom: var(--Icon-size);
          padding-top: var(--gap-m);

          .RCIG-item {
            align-items: center;
            background: none;
            border: none;
            border-bottom: 1px solid var(--color-gray3);
            display: flex;
            position: inherit;

            &::before {
              box-shadow: none;
            }

            .SearchFields-sort-item-label {
              align-items: center;
              display: flex;
              padding: var(--gap-s) 0;
              width: calc(100% - var(--Icon-size));

              &:hover {
                cursor: pointer;
              }
            }

            .SearchFields-input {
              .IconButton;

              flex-shrink: 0;
              height: calc(var(--gap-s) * 2 + var(--Icon-size)) !important;
              width: calc(var(--gap-s) * 2 + var(--Icon-size)) !important;
              z-index: 1;

              &::before {
                border: 0;
                color: var(--color-gray5);
                left: 50%;
                padding: 0;
                top: 50%;
                transform: translate(-50%, -50%);
              }

              &::after {
                height: calc(var(--gap-s) * 2 + var(--Icon-size));
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) !important;
                width: calc(var(--gap-s) * 2 + var(--Icon-size));
              }
            }

            .SearchFields-sort-item-span {
              font-style: normal;
              font-weight: normal;
              .Text.is-m;
            }

            .SearchFields-drag {
              .IconButton;

              --IconButton-name: 'drag_indicator';

              background: transparent;
              height: var(--Icon-size);
              overflow: visible;
              padding: 0;
              z-index: 1;

              &::before {
                color: var(--color-gray5);
                padding: 0;
              }

              &::after {
                height: calc(var(--gap-s) * 2 + var(--Icon-size));
                width: calc(var(--gap-s) * 2 + var(--Icon-size));
              }

              &:hover {
                cursor: grab;
              }
            }
          }

          &.Sortable-allowedContainer {
            &::before {
              margin-bottom: calc(var(--gap-xl) * 2);
              margin-top: calc(var(--gap-xl) * 2 + var(--gap-xl));
              width: 48%;
            }

            .Sortable-ghost {
              background: var(--color-blue5);
              color: var(--color-white);

              .SearchFields-input {
                &::before {
                  color: var(--color-white);
                }
              }

              .SearchFields-input {
                &:hover {
                  &::before {
                    color: var(--color-white);
                  }
                }
              }

              .SearchFields-drag {
                --Link-color: var(--color-white);
                --Link-hoverColor: var(--color-white);

                color: var(--color-white);

                &::before {
                  color: var(--color-white);
                }

                &:hover {
                  &::before {
                    color: var(--color-white);
                  }
                }
              }
            }

            .SearchFields-input {
              &::after {
                display: none;
              }
            }

            .SearchFields-drag {
              &::after {
                display: none;
              }
            }
          }
        }
      }

      &-hide {
        padding: 0 var(--gap-l) var(--gap-l) 0;

        .RCIG-list {
          &.Sortable-allowedContainer::before {
            left: var(--gap-s);
          }

          .RCIG-item {
            padding-right: var(--gap-xs);

            &.is-disabled {
              opacity: 0.5;
              pointer-events: none;
            }

            .SearchFields-sort-item-label {
              padding-left: var(--gap-xs);
            }

            .SearchFields-input {
              --IconButton-name: 'keyboard_arrow_right';

              margin-left: auto;
              margin-right: var(--gap-xs);
            }

            > .SearchFields-drag {
              border: none;
              border-left: 1px solid var(--color-gray3);
              padding-left: calc(var(--gap-s) + 2px);

              &::after {
                left: var(--gap-xs);
                top: calc(0px - calc(var(--gap-xs) * 2));
              }
            }
          }
        }
      }

      &-displayContainer {
        padding: 0 0 var(--gap-l) var(--gap-l);

        .SearchFields-displayTitle {
          height: 100%;

          .RCIG-list {
            &.Sortable-allowedContainer {
              &::before {
                left: auto;
                right: var(--gap-s);
              }
            }

            .RCIG-item {
              align-items: center;
              display: flex;
              flex-direction: row-reverse;
              padding-left: var(--gap-xs);

              .SearchFields-sort-item-label {
                padding-right: var(--gap-xs);
              }

              .SearchFields-input {
                --IconButton-name: 'keyboard_arrow_left';

                margin-left: var(--gap-xs);
              }

              .SearchFields-drag {
                border: none;
                border-right: 1px solid var(--color-gray3);
                padding-right: calc(var(--gap-s) + 2px);

                &::after {
                  left: auto;
                  right: var(--gap-xs);
                  top: calc(0px - calc(var(--gap-xs) * 2));
                }
              }

              .SearchFields-sort-item-span {
                margin-left: var(--gap-m);
                order: 2;
              }
            }
          }
        }
      }
    }

    &-columns,
    &-summary {
      &.is-hidden {
        display: none;
      }

      .SearchFields-hide {
        .RCIG-list {
          margin-top: calc(var(--gap-l) * -1);
        }

        .SearchFields-filter {
          margin-bottom: var(--gap-l);
        }

        .SearchFields-subheading {
          border-bottom: 1px solid var(--color-gray3);
          font-weight: 400;
          padding-bottom: var(--gap-s);
          text-transform: uppercase;

          + .RCIG-list {
            margin-top: 0;
            padding-top: 0;
          }
        }
      }

      .SearchFields {
        &-hide,
        &-displayContainer {
          .RCIG-list {
            &.Sortable-allowedContainer {
              &::before {
                margin-bottom: calc(var(--gap-xl) * 3);
                margin-top: calc(var(--gap-xl) * 5 + var(--gap-m));
              }
            }
          }
        }
      }

      &.has-subheadings {
        .SearchFields-hide,
        .SearchFields-displayContainer {
          .RCIG-list {
            &.Sortable-allowedContainer::before {
              margin-top: calc(var(--gap-xl) * 6 + var(--gap-m) * 2);
            }
          }
        }
      }
    }
  }

  &-missingValue {
    font-style: italic;
  }

  &-filter {
    font-weight: normal;
    margin-top: var(--gap-m);

    &::placeholder {
      .Text.is-m;
    }
  }
}

@media (@mq-xl) {
  .SearchFields {
    &-container {
      .SearchFields {
        &-hide,
        &-displayContainer {
          .RCIG-list {
            &.Sortable-allowedContainer::before {
              margin-top: calc(var(--gap-xl) * 2 + var(--gap-l));
            }
          }
        }
      }

      &-columns,
      &-summary {
        .SearchFields-hide,
        .SearchFields-displayContainer {
          .RCIG-list {
            &.Sortable-allowedContainer::before {
              margin-top: calc(var(--gap-xl) * 5);
            }
          }
        }

        &.has-subheadings {
          .SearchFields-hide,
          .SearchFields-displayContainer {
            .RCIG-list {
              &.Sortable-allowedContainer::before {
                margin-top: calc(var(--gap-xl) * 6);
              }
            }
          }
        }
      }
    }
  }
}

li.Sortable-item.Sortable-chosen.sortable-fallback.Sortable-drag[data-sortable-item-type='SearchFields-sort-item'] {
  border: none !important;
}
