// New Field Filter
//================================================== */

.field-short.fieldfilter-wrapper div:first-of-type div.dropdown  {
  border-right-color: unset;
}

.field.fieldfilter-wrapper {
  div:first-of-type {
    margin-right: auto;
    border-color: $fieldfilter-default-border-color;
  }

  select.field-filter + .dropdown-wrapper div.dropdown {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;

    &:hover {
      border-color: $filterfield-hover-border-color;
    }
  }

  div.dropdown-wrapper .dropdown:not(.dropdown-md):hover {
    transition: 0.3s;
    border-color: $filterfield-hover-border-color;
  }

  div.dropdown-wrapper:not(:focus):hover + input:not(:focus) {
    border-color: $filterfield-hover-border-color;
  }

  div.dropdown-wrapper .dropdown:hover + .ffdropdown-icon{
    color: $header-flex-toolbar-close-icon-color-hover;
  }
}

.field-short.fieldfilter-wrapper {
  .field-filter {
    position: relative;
    top: 0;
    vertical-align: top;
    z-index: 2;
  }

  div.dropdown {
    &:focus {
      position: relative;
      z-index: 3;
    }

    > .listoption-icon {
      left: 1px;
      position: relative;
      top: -1.5px;
    }
  }
}

.field-short {
  .icon,
  span.trigger,
  button.trigger {
    z-index: 2;
  }

  div.dropdown {
    + .icon {
      z-index: 3;
      margin-inline-end: 4px;
    }
  }
}

// Firefox
.is-firefox {
  .field.fieldfilter-wrapper div:first-of-type,
  .field-short.fieldfilter-wrapper div:first-of-type {
    height: 38px;
  }

  .field-short.fieldfilter-wrapper {
    .dropdown-wrapper {
      .dropdown {
        .listoption-icon {
          top: 0;
        }
      }
    }
  }

  .dropdown-list.ffdropdown {
    > .trigger {
      margin-left: -40px;

      .icon {
        left: 2px;
        top: 9px;
      }
    }

    &.is-ontop {
      > .trigger {
        .icon {
          top: 11px !important;
        }
      }
    }

    &.dropdown-short {
      > .trigger {
        margin-left: 0;

        .icon {
          top: 6px;
        }
      }
    }
  }

  &:not(.is-mac) {
    .dropdown-list.ffdropdown {
      &.is-ontop {
        > .trigger {
          .icon {
            top: 6px !important;
          }
        }
      }
    }
  }
}

// Safari
.is-safari {
  .dropdown-list.ffdropdown {
    > .trigger {
      .icon {
        top: 8.5px !important;
      }
    }

    &.is-ontop {
      > .trigger {
        .icon {
          top: 12px !important;
        }
      }
    }

    &.dropdown-short {
      > .trigger {
        .icon {
          top: 5px !important;
          left: -33px;
        }
      }
    }
  }
}

// Fix icon placement in `.ffdropdown` for IE
.ie.ie11 {
  .dropdown-list.ffdropdown {
    .listoption-icon {
      top: inherit;
    }
  }
}

html[dir='rtl'] {
  .field.fieldfilter-wrapper div.dropdown-wrapper {
    &:hover + input {
      border-left-color: $input-border-color;
    }

    &:focus-within + input {
      border-left-color: $input-border-color;
    }

    .dropdown:not(.dropdown-md):not(.dropdown-sm) {
      &:hover {
        border: 1px solid $filterfield-hover-border-color;
        border-left-color: transparent;
      }

      &:focus {
        border: 1px solid $input-color-focus-border;
        border-left-color: transparent !important;
      }
    }
  }

  .field.fieldfilter-wrapper .field-filter.input-sm {
    margin-right: -1px;
  }
  
  .form-layout-compact .field.fieldfilter-wrapper .lookup-wrapper .trigger {
    margin-top: 3px;
  }

  .form-layout-compact .field.fieldfilter-wrapper div.dropdown + .icon {
    left: 6px;
  }

  .form-layout-compact .field.fieldfilter-wrapper div.dropdown.dropdown-sm + .icon {
    left: 4px;
  }

  .form-layout-compact .field.fieldfilter-wrapper div.dropdown.dropdown-sm {
    margin-right: -1px;
  }

  .field-short.fieldfilter-wrapper div:first-of-type div.dropdown > .listoption-icon {
    top: -6px;
    right: 1px;
  }

  .field-short.fieldfilter-wrapper  div.dropdown + .icon {
    left: 6px;
  }

 .field-short.fieldfilter-wrapper  .dropdown-wrapper {
    margin-right: -1px;
  }
}