@import (reference) url('./Dropdown.less');

.SearchWidget {
  background: var(--color-white);
  display: grid;
  grid-template:
    'title' auto
    'controls' auto
    'history' auto
    'result' 1fr
    'create' auto ~'/'
    1fr;
  height: 100%;
  overflow: auto;
  position: relative;

  &.Widget {
    --Widget-padding: 0px;

    padding: 0;
  }
}

.SearchWidget-title {
  .Widget-title;

  grid-area: title;
  height: calc(var(--gap-m) * 2 + var(--Text-height));
  margin: 0;
  padding-right: calc(var(--gap-l) * 2 + var(--Icon-size));
}

.SearchWidget-history {
  grid-area: history;
}

.SearchWidget-controls {
  grid-area: controls;

  a.SearchWidget-actionsToggle {
    .IconButton;

    --IconButton-name: 'settings';

    align-items: center;
    left: 0;
    margin-top: calc(0px - var(--gap-m));
    top: calc(var(--gap-m) - var(--gap-s));
  }
}

.SearchWidget-recent,
.SearchWidget-saved,
.SearchWidget-controls,
.SearchWidget-create {
  .Icon.is-s;
  .Text.is-s;

  background: var(--color-gray1);

  h2 {
    font-size: var(--fontSize-s);
    margin: 0 calc(0px - var(--gap-l));
    padding: var(--gap-m) var(--gap-l);

    &:first-child:not(.miscHeading) {
      margin-top: calc(0px - var(--gap-m));
    }
  }

  .globalHeading,
  .miscHeading,
  .typeSpecificHeading {
    display: inline-block;
  }

  .globalHeading {
    margin-bottom: 0;
  }
}

.SearchWidget-moreFilters,
.SearchWidget-recent,
.SearchWidget-saved,
.SearchWidget-controls {
  padding: var(--gap-m) var(--gap-l) 0 var(--gap-l);

  > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading) {
    background: var(--color-gray1);
    cursor: pointer;
    position: relative;

    &::before {
      background: var(--color-black);
      border-radius: calc(var(--gap-s) + var(--Icon-size) / 2);
      content: '';
      height: calc(var(--gap-s) * 2 + var(--Icon-size));
      opacity: 0;
      position: absolute;
      right: calc(var(--gap-l) - var(--gap-s));
      top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
      transform: scale(0);
      transition:
        opacity var(--time-xs) var(--ease-in),
        transform var(--time-s) var(--ease-out);
      width: calc(var(--gap-s) * 2 + var(--Icon-size));
    }

    &:focus,
    &:hover {
      &::after {
        color: var(--Link-hoverColor);
      }

      &::before {
        opacity: 0.08;
        transform: none;
      }
    }

    &:focus-visible {
      z-index: 1;
    }
  }

  &:not(.is-collapsed) {
    padding-bottom: var(--gap-l);

    > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading) {
      margin-bottom: var(--gap-m);

      &::after {
        transform: rotate(-180deg);
      }
    }
  }

  .Message {
    margin: 0;
  }
}

.SearchWidget-recent
  > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading),
.SearchWidget-saved
  > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading),
.SearchWidget-create > h2 {
  background: var(--color-gray2);
}

.SearchWidget-moreFilters {
  background: transparent;
  display: block;
  font-size: inherit;
  padding: var(--gap-m) 0 0 0;

  h2:not(.typeSpecificHeading, .globalHeading, .miscHeading) {
    background: transparent;
    border: 0;
    font-weight: normal;
    text-transform: inherit;
  }

  &.is-collapsed {
    overflow: visible;

    > .Widget-title {
      position: relative;
    }
  }

  &:not(.is-collapsed) {
    padding-bottom: 0;
  }
}

.SearchWidget-controls {
  padding-top: calc(
    var(--gap-m) + var(--gap-s) * 2 + var(--Text-height) + var(--gap-l)
  );
  position: relative;

  .ComboInput {
    width: 100%;
  }

  .searchFiltersLocal {
    padding-top: var(--gap-m);
  }
}

.SearchWidget-create {
  grid-area: create;
  padding: var(--gap-m) var(--gap-l) var(--gap-l) var(--gap-l);

  form {
    display: flex;

    .ComboInput {
      flex: auto;
      margin-right: var(--gap-s);
    }
  }
}

.SearchWidget-query {
  left: var(--gap-l);
  position: absolute;
  right: var(--gap-l);
  top: var(--gap-m);
  width: auto;
}

.SearchWidget-type,
.SearchWidget-filter {
  display: none;
}

.SearchWidget-reset {
  .Link.is-red;
  .Text.is-s;

  align-items: center;
  background: none;
  border: 0;
  display: inline-block;
  line-height: var(--lineHeight-m);
  padding: 0;
  position: absolute;
  right: var(--gap-l);
  top: calc(
    var(--gap-m) + var(--gap-s) * 2 + var(--Text-height) + var(--gap-l)
  );

  &:focus {
    color: var(--Link-hoverColor);
  }

  &::before {
    .Icon;
    .Icon.is-m;

    content: 'refresh';
    top: calc((var(--Text-height) - var(--iconSize-m)) / 2);
  }
}

.SearchWidget-filter {
  margin-top: var(--gap-s);
  position: relative;

  .DashboardWidget-filters & {
    align-items: center;
    margin-top: 0;
  }

  .ContentSelector-select + .ComboInput {
    max-width: 100%;
  }

  > .Checkbox {
    display: none;
  }

  label {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

.SearchWidget-filter.SearchWidget-hiddenInput {
  margin-top: 0;
}

.SearchWidget-filterItem {
  order: 1;
  width: 100%;

  input[data-previewable='false'] + .ContentSelector-search,
  .ContentSelector-clear {
    margin-top: calc(0px - var(--gap-s) - var(--Icon-size) / 2);
    position: absolute;
    right: 0;
    top: 50%;
  }

  input[data-previewable='true'] {
    &:not([data-preview]),
    &[data-preview=''] {
      + .ContentSelector-search {
        width: 100%;
      }
    }
  }
}

.SearchWidget-filter.is-multiple {
  position: relative;

  &::before {
    border-color: var(--Input-borderColor);
    border-style: solid;
    border-width: 0 0 1px 1px;
    bottom: calc(var(--gap-s) + var(--Text-height) / 2 - 1px);
    content: '';
    left: 0;
    position: absolute;
    top: calc(var(--gap-s) * 4 + var(--Text-height));
    width: var(--gap-s);
  }

  .SearchWidget-filterItem {
    position: relative;

    &:not(:last-of-type) {
      margin-left: calc(var(--gap-s) * 2);
      margin-top: var(--gap-s);
      order: 2;
      width: calc(100% - var(--gap-s) * 2);

      .ComboInput {
        cursor: default;
        width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
      }

      .ComboInput:hover::before {
        border-color: var(--Input-borderColor);
      }

      .ComboInput:focus::before {
        border-bottom-width: 1px;
        border-color: var(--Input-focusColor);
      }

      .ComboInput-icon::after {
        display: none;
      }

      input[data-previewable='false'] + .ContentSelector-search {
        display: none;
      }

      input[data-previewable='true'] {
        &:not([data-preview]),
        &[data-preview=''] {
          + .ContentSelector-search {
            width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
          }
        }
      }

      input[data-previewable='true'][data-preview]:not([data-preview=''])
        + .ContentSelector-search {
        margin-top: var(--gap-s);
        max-width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
        padding-top: var(--gap-s);

        &::before {
          background: var(--color-gray1);
        }

        & + .ContentSelector-edit + .ContentSelector-clear,
        & + .ContentSelector-clear {
          margin-top: 0;
          position: absolute;
          right: 0;
          top: 0;
        }

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

      .ContentSelector-clear {
        right: 0;
      }
    }
  }

  &.is-missing .SearchWidget-filterItem:not(:last-of-type) {
    opacity: 0.6;
    pointer-events: none;
  }
}

.SearchWidget-filter.is-advanced {
  position: relative;

  a {
    .IconButton;

    --IconButton-name: 'edit';

    position: absolute;
    right: 0;
    top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
  }
}

.SearchWidget-filter.is-date {
  display: block;

  .SearchWidget-dateRanges {
    padding-left: var(--gap-m);
    width: 100%;

    .DateTimeInput {
      margin-top: var(--gap-s);
      width: 100%;
    }
  }
}

.SearchWidget-filter.is-record {
  .ComboInput {
    max-width: none;
    width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
  }
}

.toolEntityDropdown-container {
  margin-left: var(--gap-s);
}

.SearchWidget-controls:not(.is-collapsed) {
  .SearchWidget-type {
    display: block;
  }

  .SearchWidget-filter {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}

.SearchWidget-result {
  grid-area: result;
  position: relative;

  .Popup-content & {
    > div:first-child {
      height: 100%;
    }
  }

  &.loading::after {
    .Icon;
    .Icon.is-xl;

    animation: spin var(--time-xl) infinite ease-in-out;
    color: var(--color-black);
    content: 'autorenew';
    left: calc(50% - var(--Icon-size) / 2);
    position: absolute;
    top: calc(50% - var(--Icon-size) / 2);
    visibility: visible;
    z-index: 1;
  }
}

.expand() {
  border-bottom: 0;
  padding-bottom: var(--gap-l);

  > h2 {
    cursor: auto;
    margin-bottom: var(--gap-m);

    &::after {
      display: none;
    }
  }

  > *:not(h2) {
    display: block;
  }
}

.Popup .SearchWidget:not(.is-global) {
  .SearchWidget-result h2 {
    margin-left: var(--gap-l);

    + .SearchResult-table.LinkTable {
      margin: 0 var(--gap-l);
      width: calc(100% - 2 * var(--gap-l));
    }
  }
}

//global search widget
.SearchWidget.is-global {
  .SearchWidget-title {
    display: none;
  }

  .SearchWidget-query {
    padding-right: calc(var(--gap-l) + var(--Icon-size) + var(--gap-s));
  }
}

// Search views without Saved Searches support
.AssignmentDeskDashboard,
.Popup.is-fromRight[data-popup-source-class~='ContentSelector-search'],
.SearchWidget.DashboardWidget {
  .SearchWidget-saved {
    display: none;
  }
}

@media (@mq-s) {
  .SearchWidget.is-global {
    .SearchWidget-query {
      display: none;
      padding-right: 0;
    }

    .SearchWidget-controls {
      padding-top: var(--gap-m);
    }

    .SearchWidget-reset {
      right: calc(var(--gap-l) * 2 + var(--Icon-size));
      top: var(--gap-m);
    }
  }
}

@media (@mq-m) {
  .SearchWidget {
    --SearchWidget-leftWidth: 250px;

    display: grid;
    grid-template:
      'title title' auto
      'controls result' 1fr
      'history result' auto
      'create result' auto ~'/'
      var(--SearchWidget-leftWidth) 1fr;
    overflow: visible;
  }

  .SearchWidget-controls {
    .expand();

    overflow: auto;
  }

  .SearchWidget-type {
    display: block;
  }

  .SearchWidget-filter {
    display: flex;
    flex-wrap: wrap;
  }

  .SearchWidget-reset {
    &::before {
      top: calc((var(--Text-height) - var(--iconSize-s)) / 2);
    }
  }

  .SearchWidget-result {
    border-left: 1px solid var(--color-gray3);
    overflow: hidden;
  }

  //Global search widget styling
  .SearchWidget.is-global {
    .SearchWidget-reset {
      right: var(--gap-l);
    }
  }

  .SearchWidget[name='searchAdvancedFull'] {
    grid-template:
      'title result' auto
      'controls result' 1fr
      'history result' auto
      'create result' auto ~'/'
      var(--SearchWidget-leftWidth) 1fr;
  }
}

@media (@mq-l) {
  .SearchWidget {
    --SearchWidget-leftWidth: 250px;
  }

  .SearchWidget-reset {
    line-height: var(--lineHeight-s);
  }

  .SearchWidget-result {
    overflow: hidden;
  }
}

@media (@mq-xl) {
  .SearchWidget {
    .SearchResult-views {
      width: auto;
    }
  }
}

.SavedSearches {
  &-links > a {
    display: block;
    margin-right: calc(var(--gap-s) * 2 + var(--Icon-size));
    padding: var(--gap-m) 0;
  }

  &-more {
    .IconButton;

    --IconButton-name: 'more_horiz';

    position: absolute;
    right: 0;
    top: calc(50% - var(--gap-s) - var(--Icon-size) / 2);

    &::before {
      font-weight: bold;
    }

    &.is-active {
      .IconButton.is-focus;

      --IconButton-name: 'clear';
    }

    &-dropdown {
      .Dropdown;

      &-copy {
        cursor: pointer;

        &:state(btu-copy-to-clipboard-copied) {
          font-style: italic;
          opacity: 0.5;
          pointer-events: none;
        }

        & + textarea {
          display: none;
        }

        button {
          display: none;
        }
      }

      &.is-open {
        .Dropdown.is-open;
      }

      [role='menuitem'] {
        .Dropdown-item;
      }
    }
  }

  &-pagination {
    border-top: 1px solid var(--Input-borderColor);
    padding: var(--gap-xs) 0 0;

    .pagination {
      justify-content: space-between;
      width: 100%;
    }
  }
}

// Legacy.
.searchForm,
.searchControls {
  display: contents;
}

.searchMissing {
  display: none;
}

.savedSearches > ul > li {
  position: relative;

  &:not(:first-child) {
    padding-top: var(--gap-xs);
  }
}
