// FieldFilter
//==============================================================================
$dd-width: 55px;
$dd-width-sm: 45px;

@function el-width($width) {
  @return calc(#{$width} - #{$dd-width});
}

@function el-width-sm($width) {
  @return calc(#{$width} - #{$dd-width-sm});
}

.field,
.field-short {
  &.fieldfilter-wrapper {
    white-space: nowrap;

    div:first-of-type {
      margin-right: 0;
      vertical-align: top;

      div.dropdown {
        border-radius: 2px 0 0 2px;
        text-overflow: inherit;
        width: $dd-width;
        position: relative;
        left: 1px;

        span {
          position: static;
          width: 1px;
          opacity: 0;
        }

        > .listoption-icon {
          height: 14px;
        }

        &:hover {
          > .listoption-icon {
            color: $header-flex-toolbar-close-icon-color-hover;
          }
        }

        &.is-open {
          + .ffdropdown-icon {
            opacity: 0;
          }
        }
      }
    }

    .icon-dirty {
      left: $dd-width + 2px;
    }

    .icon-success {
      vertical-align: top;
    }

    .field-filter {
      border-radius: 0 2px 2px 0;
      max-width: $field-md;
      width: el-width($field-md);
      color: $filterfield-placeholder-color;
      border: 1px solid $fieldfilter-default-border-color;

      &.timepicker,
      &.datepicker {
        width: el-width($datepicker-default-width);
      }

      &.input-xs {
        width: el-width($field-xs);
      }

      &.input-sm {
        width: el-width-sm($field-sm);
      }

      &.input-mm {
        width: el-width($field-mm);
      }

      &.input-md {
        width: el-width($field-md);
      }

      &.input-lg {
        width: el-width($field-lg);
      }

      &.input-full {
        width: el-width(100%);
      }
    }

    .dropdown-xs {
      width: el-width($field-xs);
    }

    .dropdown-sm {
      width: el-width-sm($field-sm);
    }

    .dropdown-mm {
      width: el-width($field-mm);
    }

    .dropdown-md {
      width: el-width($field-md);
      border-radius: 0 2px 2px 0;
    }

    .dropdown-lg {
      width: el-width($field-lg);
    }

    .dropdown-full {
      width: el-width(100%);
    }
  }
}

.field {
  &.fieldfilter-wrapper {
    .field-filter {
      &:hover {
        border: 1px solid $filterfield-hover-border-color;
      }

      &:focus {
        border: 1px solid $input-color-focus-border;
        box-shadow: $focus-box-shadow-new;
        position: relative;
      }
    }
  }
}

.android,
.ios {
  .field {
    &.fieldfilter-wrapper {
      .field-filter {
        &:hover {
          border-color: $fieldfilter-default-border-color;
        }
      }
    }
  }
}

.field-short,
.form-layout-compact .field {
  &.fieldfilter-wrapper {
    div:first-of-type div.dropdown {
      width: 45px;
    }
  }
}

html[class*='theme-classic-'] {
  .field {
    &.fieldfilter-wrapper {
      select.dropdown + .dropdown-wrapper {
        .ffdropdown-icon {
          right: 7px;
          top: 0.5px;
        }
      }
    }
  }
}

// Opened Dropdown list
.dropdown-list.ffdropdown {
  .dropdown-search {
    opacity: 0;
    padding-left: 23px;
    width: 0;
  }

  > .trigger {
    .icon {
      top: 9px;
      left: 0;
    }
  }

  > .listoption-icon {
    display: none;
  }

  .listoption-icon {
    height: 14px;
  }
}

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

  .dropdown-list.ffdropdown {
    > .trigger {
      .icon {
        top: 6px;
        left: 1.5px;
      }
    }
  }
}

// IOS
.ios {
  .dropdown-list.ffdropdown {
    .dropdown-search {
      width: 100%;
    }
  }
}

// RTL Styles ******************************************************************
html[dir='rtl'] {
  .field,
  .field-short {
    &.fieldfilter-wrapper {
      div:first-of-type {
        margin-right: inherit;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 2px;
        border-top-left-radius: 2px;

        div.dropdown {
          border-left-color: $fieldfilter-border-side-color;
          border-radius: 0 2px 2px 0;
          border-right-color: $input-color-initial-border;
          padding-top: 8px;
          right: 1px;
        }
      }

      .field-filter {
        border-radius: 2px 0 0 2px;
      }
    }
  }

  .field {
    &.fieldfilter-wrapper {
      div.dropdown > .listoption-icon + span {
        display: inline-flex;
        opacity: 0;
      }

      div:first-of-type {
        div.dropdown {
          right: 0;
        }
      }
    }
  }

  // Opened Dropdown list
  .dropdown-list.ffdropdown {
    .dropdown-search {
      padding-left: inherit;
      padding-right: 23px;
    }

    > .trigger {
      margin-left: inherit;
      margin-right: 26px;

      .icon {
        left: -1px;
        top: 9px;
      }
    }
  }

  .dropdown-list.dropdown-short {
     > .trigger {
      margin-left: inherit;
      margin-right: 26px;

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

// Fixes some layout issues on iPhones
@media (max-width: 767px) {
  .field.fieldfilter-wrapper .field-filter.input-md,
  .field.fieldfilter-wrapper .field-filter.colorpicker-input-md,
  .field.fieldfilter-wrapper select.field-filter.dropdown + .dropdown-wrapper {
    width: calc(300px - 55px);
  }

  .field-short.fieldfilter-wrapper .field-filter.input-md,
  .field-short.fieldfilter-wrapper .field-filter.colorpicker-input-md,
  .field-short.fieldfilter-wrapper select.field-filter.dropdown + .dropdown-wrapper {
    width: calc(300px - 55px);
  }

  .form-layout-compact .field.fieldfilter-wrapper select.field-filter.dropdown + .dropdown-wrapper {
    width: auto;
  }
}
