/*
 * 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
 */
.table-header-menu {
  #scout.popup-2();
  margin: @widget-popup-margin;
  white-space: nowrap;
  overflow: hidden;

  &.animate-open {
    .popup-animate-open();
  }

  &.animate-remove {
    .popup-animate-remove();
  }
}

.table-header-menu-body {
  position: relative;
  height: 100%;
  width: 100%;
}

.table-header-menu-actions {
  display: inline-block;
  vertical-align: top;
  padding: @table-header-menu-padding;

  & > .table-header-menu-group > .table-header-menu-group-text {
    // Increase size a little to ensure every text is fully visible, at least for german and english (currently necessary for additional sorting group)
    width: calc(100% + 12px);
  }
}

.table-header-menu-filters {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  padding: 0 @table-header-menu-padding 0 @table-header-menu-padding;
  margin: @table-header-menu-padding 0 @table-header-menu-padding 0;

  .table-header-menu-body.compact > & {
    display: block;
    height: auto;
    margin-top: 5px;
  }

  & > .table-header-menu-group.first {
    display: flex;
    align-items: start;
    flex-wrap: wrap;

    & > .table-header-menu-group-text {
      flex-grow: 1;
    }

    & > .actions > .action {
      height: 22px;
      margin-top: -4px;
    }
  }

  & > .table-header-menu-group > .form-field {
    position: relative;
  }
}

.table-header-menu-group {
  padding-top: @table-header-menu-group-padding-top;
  padding-bottom: 5px;

  &.first {
    padding-top: 0;
  }

  &.last {
    padding-bottom: 0;
  }

  &.buttons {
    padding-bottom: 35px;

    &.last {
      padding-bottom: 29px;
    }
  }
}

.table-header-menu-group-text {
  font-weight: bold;
  color: @label-color;
  padding-bottom: 4px;
  #scout.overflow-ellipsis-nowrap();
}

.table-header-menu-command {
  float: left;
  width: @table-header-menu-cmd-width;
  margin-right: 10px;
  height: @table-header-menu-cmd-height;

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

  &.last {
    margin-right: 0;
  }

  & > .icon::after {
    position: relative;
    left: 3px;
    top: -3px;
    font-size: 13px;
  }

  &.move-top > .icon::before {
    content: @icon-angle-double-left;
  }

  &.move-up > .icon::before {
    content: @icon-angle-left;
  }

  &.move-down > .icon::before {
    content: @icon-angle-right;
  }

  &.move-bottom > .icon::before {
    content: @icon-angle-double-right;
  }

  &.sort-asc > .icon::before,
  &.sort-asc-add > .icon::before {
    content: @icon-long-arrow-up;
  }

  &.sort-desc > .icon::before,
  &.sort-desc-add > .icon::before {
    content: @icon-long-arrow-down;
  }

  &.sort-asc-add,
  &.sort-desc-add {
    & > .icon::after {
      content: @icon-plus;
      display: inline-block; /* fix for pointer-events: none in IE11 */
    }

    &.selected > .icon::after {
      content: attr(data-icon);
      font-size: 12px;
      line-height: 12px; /* limit height otherwise arrow would move up in some browsers */
    }
  }

  &.add-column > .icon::before {
    content: @icon-plus;
  }

  &.remove-column > .icon::before {
    content: @icon-minus;
  }

  &.change-column > .icon::before {
    content: @icon-pencil;
  }

  &.togglable.selected:hover {
    & > .icon::before {
      content: @icon-remove;
    }

    & > .icon::after {
      content: '';
    }
  }

  &.hierarchy-collapse-all > .icon::before {
    content: @icon-collapse-all;
  }

  &.hierarchy-expand-all > .icon::before {
    content: @icon-expand-all;
  }

  &.group > .icon::before,
  &.group-add > .icon::before {
    content: @icon-group;
  }

  &.group-add {
    & > .icon::after {
      content: @icon-plus;
      display: inline-block; /* fix for pointer-events: none in IE11 */
    }

    &.selected > .icon::after {
      content: attr(data-icon);
      font-size: 12px;
      line-height: 12px; /* limit height otherwise arrow would move up in some browsers */
    }
  }

  &.optimize-width > .icon::before {
    content: @icon-optimize-width;
  }

  &.optimize-widths > .icon::before {
    content: @icon-optimize-widths;
  }

  &.table-header-menu-command.width {
    width: @table-header-menu-cmd-width + @field-status-margin-left + @field-status-size;
  }

  &.aggregation-function {

    &.sum > .icon::before {
      content: @icon-sum;
    }

    &.avg > .icon::before {
      content: @icon-avg;
    }

    &.max > .icon::before {
      content: @icon-max;
    }

    &.min > .icon::before {
      content: @icon-min;
    }
  }

  &.color-gradient1 {
    background-image: linear-gradient(to right, @column-background-effect-gradient1-start-background-color, @column-background-effect-gradient1-end-background-color);
  }

  &.color-gradient2 {
    background-image: linear-gradient(to right, @column-background-effect-gradient2-start-background-color, @column-background-effect-gradient2-end-background-color);
  }

  &.color-bar-chart {
    background-image: linear-gradient(to right, @column-background-effect-bar-chart-background-color 0, @column-background-effect-bar-chart-background-color 66%, @palette-white 66%, @palette-white 100%);
    background-color: transparent;
  }

  &.color {
    &:hover {
      border-width: 2px;
    }

    &.selected {
      border-width: 2px;

      &.togglable:hover {
        background-image: none;
      }
    }
  }
}

.table-header-menu-filter-table.table-row-check {
  border: 1px solid @control-border-color;
  border-radius: @border-radius;

  & > .table-data {
    margin-top: 0;
    padding: 3px;

    & > .table-row {
      border-radius: @border-radius;
      margin-bottom: 2px;

      &.last {
        margin-bottom: 0;
      }

      & > .table-cell {
        border: 0;

        &.halign-right {
          padding-right: 12px;
        }
      }
    }
  }
}

.table-header-menu-filter-number-column {
  font-size: @font-size-small;
  color: @table-header-menu-filter-number-column-color;
  vertical-align: middle;
}

.table-header-menu-toggle-sort-order {
  &::before {
    #scout.font-icon();
  }
}

.table-header-menu-toggle-sort-order-alphabetically::before {
  content: @icon-sort-alpha-asc-bold;
}

.table-header-menu-toggle-sort-order-amount::before {
  content: @icon-sort-amount-desc-bold;
}

/* Filter fields group-box */
.filter-fields {
  padding: 0;

  & > .group-box-body {
    padding: 0;

    & > .form-field > label {
      margin-left: 0;
    }
  }
}