/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
@search-outline-field-height: 34px;

.search-outline.tree {
  & > .outline-title {
    border-bottom: none;
    margin-bottom: 0;
  }
}

.search-outline-panel {
  position: relative;
  border-bottom: 1px solid @outline-title-border-color;
  padding: 0 @outline-title-padding-right @search-outline-panel-padding-bottom @outline-title-padding-left;

  .view-button-box-invisible & {
    padding-top: @search-outline-panel-no-title-padding-top;
    padding-bottom: @search-outline-panel-no-title-padding-top + 1xp;

    & > .clear-icon {
      top: @search-outline-panel-no-title-padding-top;
    }
  }

  & > .key-box {
    margin-top: 5px;
    margin-right: @outline-title-padding-right;
  }
}

.search-outline-field {
  border: 1px solid @control-border-color;
  height: @search-outline-field-height;
  border-radius: 5px;
  width: 100%;

  &:focus {
    #scout.focus-border();
  }

  &.has-text {
    padding-right: @text-field-padding-x + 15px;

    & + .clear-icon {
      display: flex;
    }
  }

  & + .clear-icon {
    display: none;
    position: absolute;
    margin-right: 5px;
    right: @outline-title-padding-right;
    top: 0;
    height: @search-outline-field-height;
  }
}

.search-outline-status {
  #scout.overflow-ellipsis-nowrap();
  cursor: pointer;
  padding-right: 8px;
  text-align: right;
  padding-top: 12px;
  margin-bottom: -4px;
}

.outline.breadcrumb > .search-outline-panel {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-bottom-color: @outline-breadcrumb-border-color;

  & > .search-outline-status {
    text-align: left;
    padding-left: 8px;
  }
}

.compact.outline.breadcrumb > .search-outline-panel {
  padding-left: @compact-outline-node-padding-x;
  padding-right: @compact-outline-node-padding-x;

  & > .search-outline-field + .clear-icon {
    right: @compact-outline-node-padding-x;
  }
}