// New Lookup
//================================================== //
.lookup-modal {
  .toolbar-searchfield-wrapper {
    &.non-collapsible .searchfield {
      height: 38px;
    }

    &.non-collapsible .btn-icon {
      .icon.close {
        top: 0;
      }
    }

    &.has-close-icon-button {
      .btn-icon.close:not(.is-empty) {
        @media only screen and (max-width: $breakpoint-phone-to-tablet) {
          margin-right: 0;
        }
      }
    }
  }

  .searchfield-wrapper.non-collapsible.is-open > .icon:not(.close):not(.icon-error) {
    left: 9px;
  }

  .datagrid-result-count {
    top: -2px;
  }
}

.lookup-wrapper {
  .trigger {
    margin-top: 6px;

    .icon {
      right: 0;
      top: 0;
    }
  }

  .searchfield-wrapper {
    > .icon.close {
      right: 35px;
      top: 19px;
    }
  }

  .has-custom-icon .icon {
    height: 16px;
    right: -8px;
    width: 16px;
  }
}

.field-short,
.form-layout-compact .field {
  .lookup-wrapper {
    .trigger {
      margin-top: 1px;

      .icon {
        right: 0;
        top: -1px;
      }
    }
  }
}

html.is-firefox {
  .field-short,
  .form-layout-compact .field {
    .lookup-wrapper {
      .trigger {
        margin-top: 2px;
      }
    }
  }
}

html.is-safari {
  .field-short {
    .lookup-wrapper {
      .trigger {
        top: 2px;
      }
    }
  }

  .form-layout-compact {
    .lookup-wrapper {
      .trigger,
      .tooltip-description + .trigger {
        top: 2px;
      }
    }
  }
}

html[dir='rtl'] {
  .lookup-wrapper {
    .trigger {
      margin-right: -32px;
      margin-top: 8px;

      .icon {
        left: auto;
      }
    }

    .searchfield-wrapper {
      > .icon.close {
        left: 35px;
      }
    }
  }

  .field-short,
  .form-layout-compact .field {
    .lookup-wrapper {
      .trigger {
        margin-right: -25px;
        margin-top: 4px;

        .icon {
          right: 0;
          top: -2px;
        }
      }
    }
  }
}

.modal-content {
  .toolbar {
    .buttonset {
      .searchfield-wrapper {
        &:not(.has-text) {
          button.close {
            display: none;
          }
        }

        .btn-icon {
          svg.close.icon {
            border: 1px solid transparent;
          }

          &:focus {
            .close.icon {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}

html[dir='rtl'] .modal-content .toolbar .buttonset .searchfield-wrapper .btn-icon.close {
  top: 50%;

  svg.icon.close {
    position: relative;
    top: 1px;
  }
}