/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import '../variables';
@import '../variables/search_vars';
@import '../variables/forms_vars';
@import '../mixins';

.visually-hidden {
  display: none;
}

.dlt-search {
  position: relative;

  &--open {
    .dlt-text-search {
      border: $forms-border-width $forms-border-style $forms-color-primary;
      outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
      outline-offset: $forms-outline-offset;
      border-radius: $forms-border-radii;
    }

    .dlt-search__drawer{
      display: block;
    }
  }

  &--sync {

    .clear-icon {
      top: $search-clear-icon-sync-top;
      background: $search-color-background;
      z-index: 2;
      font-size: $search-clear-icon-font-size;

      &:active:not(:disabled){
        color: $search-color-primary-active;
      }
    }

    .search-icon {
      position: absolute;
      top: $search-search-icon-sync-position;
      right: $search-search-icon-sync-position;
      cursor: default;
      background: $search-color-background;
      color: $search-color-icon-interactive-secondary-search;

      .dlt-icon-lg {
        margin-right: 0;
      }

      &:active:not(:disabled),
      &:focus {
        color: $search-color-icon-interactive-secondary-search;
        background-color: transparent;
        outline: $search-border-width-hover $search-border-style-hover transparent;
      }
    }
  }

  &--async {
    .clear-icon {
      top: $search-clear-icon-async-top;
      right: $search-clear-icon-async-right;
      font-size: $search-clear-icon-font-size;
      background: $search-color-background;

      &:active:not(:disabled){
        color: $search-color-primary-active;
      }
    }

    .dlt-text-search{
      padding-right: 36px;
    }
    
    .dlt-button-primary {
      position: absolute;
      top: 0;
      right: 0;
      height: $search-async-button-size;
      width: $search-async-button-size;
      padding: 0;
      justify-content: center;
      border-radius: 0 $forms-border-radii $forms-border-radii 0;

      .dlt-icon-lg {
        margin-right: 0;
      }
    }
  }

  &__drawer {
    display: none;
    position: absolute;
    top: $search-drawer-top;
    left: 0;
    z-index: $search-drawer-z-index;
    background: $search-color-background;
    width: 100%;
    padding: $search-drawer-padding;
    border-radius: 0 0 $search-border-radii $search-border-radii;
    @include box-shadow($search-drawer-elevation);

    .dlt-list--multiline > li{
      height: auto;
      padding: $search-drawer-multiline-padding;
    }

    &-help {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $search-help-margin;
      padding: $search-help-padding;
      height: $search-help-height;
      font-size: $search-font-size-sm;

      span {
        float: left;
        color: $search-color-help-text;
      }

      a, a:hover {
        float: right;
        color: $search-color-primary;
      }
    }

    .dlt-icon-search,
    .dlt-icon-history {
      color: $search-color-icon-interactive-secondary;
    }

    .dlt-list-item {
      color: $search-color-text-interactive-secondary;
      padding: $search-drawer-list-item-padding;
      height: $search-drawer-list-item-height;
      border-bottom: $search-border-width $search-border-style transparent;

      &:hover{
        .dlt-button-icon{
          display: inline-flex;
        }
      }

      .dlt-button-icon{
        position: absolute;
        right: $search-drawer-list-item-remove-button-right;
        top: $search-drawer-list-item-remove-button-top;
        display: none;

        &:not(.btn-selected):not(:active):hover:enabled, &:focus{
          color: $search-color-primary-active;
          border-color: transparent;
          box-shadow: none;
        }

        &:active{
          border-color:$search-color-primary;
          @include box-shadow(inset 0px 0px 0px 1px $search-color-primary);
        }

        i{
          font-size:$search-clear-icon-font-size;
        }
      }
    }

    .dlt-list-item--active{
      @extend .dlt-list-item, :hover;
    }

    .dlt-list-item__text {
      font-weight: $search-drawer-list-item-font-weight;
    }

    &-no-results {
      .dlt-search__drawer-help {
        justify-content: start;
        align-items: center;
        font-size: $search-font-size;

        b {
          margin-right: $search-drawer-list-item-highlight-margin-right;
          font-weight: $search-drawer-list-item-highlight-font-weight;
        }

        em{
          display:inline-block;
          width: 58%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .dlt-icon-search {
        font-size: $search-search-icon-font-size;
        margin-right: $search-search-icon-margin-right;
        position: relative;
        bottom: $search-search-icon-bottom;
        line-height: $search-search-icon-line-height;
      }

      p {
        font-size: $search-font-size-sm;
        padding: $search-drawer-no-results-text-padding;
        margin-bottom: 0;
        line-height: $search-drawer-no-results-text-line-height;
        border-top: $search-border-width $search-border-style $search-color-border;

        &:last-child {
          padding-bottom: $search-drawer-no-results-last-child-padding;
        }
      }
    }
  }
}
