// New Field Options
//================================================== */

.field-options.input-full,
.field-options.input-lg {
  max-width: calc(100% - 42px);
}

.field.is-fieldoptions {
  .btn-actions:not(.is-checkbox) {
    left: -12px;
    top: 0;
    width: $input-size-regular-height;
  }

  &.is-active .btn-actions:not(.is-checkbox) {
    margin-left: -1px;
  }

  .colorpicker-container {
    ~ .btn-actions {
      left: -11px;
      top: -10px;
      width: $input-size-regular-height;
    }
  }

  .dropdown,
  .multiselect {
    ~ .btn-actions:not(.is-checkbox) {
      top: 2px;
    }
  }

  .lookup-wrapper {
    .btn-actions:not(.is-checkbox) {
      left: -6px !important;
    }
  }

  .spinbox-wrapper {
    .btn-actions {
      left: -9px;
      width: $input-size-regular-height;
    }
  }

  .spinbox.field-options {
    width: 194px;
  }

  [data-clearable='true'] ~ .icon.close.is-empty ~ .btn-actions {
    left: -12px;
  }

  .field-options ~ .close ~ .icon ~ .btn-actions,
  input[type='text'][readonly]:not(.fileupload) ~ .btn-actions {
    top: 0;
  }

  .field-options ~ .close ~ .icon ~ .btn-actions.btn-menu:not(.is-checkbox) {
    top: 0 !important;
    left: -8px !important;
  }

  .field-options {
    ~ .close {
      &:not(.is-empty) {
        top: 0;

        ~ .btn-actions {
          left: -36px;
          top: 0;
        }
      }

      &.is-empty {
        ~ .btn-actions {
          left: -12px;
        }
      }
    }
  }

  [data-clearable='true'] + .icon.close {
    left: -8px;
    margin-left: -18px !important;
    right: auto;
    top: -2px;
  }

  .searchfield-wrapper {
    .btn-actions {
      left: -7px;
      width: $input-size-regular-height;
    }

    .btn-icon {
      &.close:not(.is-empty) {
        right: 45px;
        top: 7px;
      }
    }
  }

  .searchfield-wrapper.has-focus:not(.toolbar-searchfield-wrapper) .btn-actions,
  .searchfield-wrapper .btn-actions {
    left: -9px !important;
    top: 0;
  }

  .searchfield-wrapper.has-close-icon-button .searchfield {
    ~ .icon.close {
      right: 50px;
      top: 12px;
    }
  }

  textarea {
    ~ .btn-actions:not(.is-checkbox) {
      left: auto;
      margin-left: -9px;
      top: calc(50% - 2px);
    }
  }

  .fileupload {
    ~ .trigger-close:not(.is-visible) ~ .btn-actions {
      left: -11px !important;
    }

    ~ .trigger-close.is-visible ~ .btn-actions {
      left: 16px !important;
    }
  }

  .searchfield-wrapper:hover .btn-actions {
    left: -8px !important;
  }

  input[type='text'].field-options[data-clearable='true']:not(.searchfield) ~ .btn-icon.close.is-empty ~ .btn-actions.btn-menu:not(.is-checkbox) {
    left: -11px;
  }

  .searchfield-wrapper .searchfield.field-options[data-clearable='true'] ~ .btn-icon.close.is-empty ~ .icon ~ .btn-actions.btn-menu:not(.is-checkbox) {
    left: -11px;
  }

  .spinbox-wrapper ~ .btn-actions.btn-menu:not(.is-checkbox) {
    left: -8px;
  }

  .timepicker.field-options ~ .btn-icon.trigger ~ .btn-actions.btn-menu:not(.is-checkbox),
  .datepicker.field-options ~ .btn-icon.trigger ~ .btn-actions.btn-menu:not(.is-checkbox) {
    left: -11px;
  }
}

.field-options.searchfield ~ .icon.close {
  right: 48px;
}

.radio-group .field-options {
  margin-left: -8px;

  + .btn-actions {
    left: -11px !important;
  }
}

.summary-form {
  .data.field-options {
    line-height: 20px;
    margin-bottom: -10px;

    &.is-singleline {
      margin-bottom: -7px;
    }

    ~ .btn-actions {
      left: -11px;
      line-height: 20px;
      width: 3.7rem !important;
    }
  }
}

.compound-field .field.is-fieldoptions:first-child input[type='text'] ~ .btn-actions:not(.is-checkbox) {
  left: -12px;
}

.compound-field .field.is-fieldoptions input[type='text'] ~ .btn-actions:not(.is-checkbox) {
  left: -13px;
  top: 0;
}

.field-options.checkbox ~ .btn-actions {
  top: 2px;
}

.is-firefox {
  .field.is-fieldoptions {
    .btn-actions:not(.is-checkbox) {
      width: 38px;
    }

    .field-options[data-clearable='true'] ~ .btn-actions:not(.is-checkbox) {
      top: 0;
    }

    .dropdown,
    .multiselect {
      ~ .btn-actions:not(.is-checkbox) {
        top: 2px;
      }
    }

    .spinbox-wrapper {
      .btn-actions {
        left: -9px !important;
        width: 38px !important;
      }
    }

    .searchfield-wrapper {
      .field-options.searchfield ~ .btn-actions {
        top: auto;
      }
    }

    .colorpicker-container ~ .btn-actions {
      left: -12px !important;
      top: -10px;
    }
  }

  // Compact Mode for Firefox
  .field-short.is-fieldoptions,
  .form-layout-compact .field.is-fieldoptions {
    .btn-actions:not(.is-checkbox) {
      top: 1px !important;
      width: 28px;

      .icon {
        top: -5px;
      }
    }

    input[type='text'].field-options[data-clearable='true'] {
      ~ .btn-icon.close {
        top: 4px;
      }
    }

    .searchfield-wrapper .field-options.searchfield {
      ~ .btn-icon.close ~ .btn-actions {
        top: 2px !important;
      }
    }

    .dropdown ~ .btn-actions,
    .multiselect ~ .btn-actions {
      top: 3px !important;
    }

    .spinbox-wrapper .btn-actions {
      top: 5px !important;
      width: 28px !important;
    }

    .colorpicker-container ~ .btn-actions {
      top: -8px !important;
    }

    [data-clearable='true'] + .icon.close ~ .btn-actions,
    input[type='text'][readonly]:not(.fileupload) ~ .btn-actions {
      top: 1px !important;
    }

    .searchfield-wrapper.has-focus:not(.toolbar-searchfield-wrapper) > .icon:not(.close):not(.icon-error),
    .searchfield-wrapper > .icon:not(.close):not(.icon-error) {
      top: 14px;
    }

    .textarea ~ .btn-actions:not(.is-checkbox) {
      top: calc(50% - 0px) !important;
    }
  }

  .form-layout-compact .compound-field .field.is-fieldoptions:first-child input[type='text'] ~ .btn-actions:not(.is-checkbox) {
    top: 4px !important;
  }

  &.is-mac {
    .field-short.is-fieldoptions,
    .form-layout-compact .field.is-fieldoptions {
      .btn-actions:not(.is-checkbox) {
        top: 2px !important;
      }

      .field-options.dropdown ~ .btn-actions,
      .field-options.multiselect ~ .btn-actions {
        top: 0 !important;
      }

      .field-options ~ .close ~ .icon ~ .btn-actions {
        top: 5px !important;
      }

      .field-options.spinbox ~ .btn-actions {
        left: -1px !important;
        top: 5px !important;
      }

      .field-options.lookup ~ .btn-actions {
        left: -1px;
      }

      .colorpicker-container ~ .btn-actions {
        left: -7px !important;
        top: -4px !important;
      }

      [data-clearable='true'] + .icon.close ~ .btn-actions,
      input[type='text'][readonly]:not(.fileupload) ~ .btn-actions {
        top: 5px !important;
      }

      .textarea ~ .btn-actions:not(.is-checkbox) {
        top: calc(50% - 0px) !important;
      }
    }

    .field-short.is-fieldoptions,
    .form-layout-compact {
      .radio-group .field-options + .btn-actions {
        left: -10px !important;
      }
    }
  }
}

// Compact Layout
.field-short.is-fieldoptions,
.form-layout-compact .field.is-fieldoptions {
  .btn-actions:not(.is-checkbox) {
    left: -1px;
    top: 1px;
  }

  .dropdown ~ .btn-actions,
  .multiselect ~ .btn-actions {
    top: -1px;
  }

  input[type='text']:not(.spinbox):not(.searchfield):not(.fileupload):not(.datepicker):not(.timepicker):not(.lookup) {
    ~ .btn-actions {
      left: -2px !important;
      top: -1px;
    }

    &[data-clearable='true'] ~ .btn-icon:not(.is-empty) {
      ~ .btn-actions {
        left: -25px !important;
      }
    }
  }

  input[type='text'].datepicker.field-options ~ .btn-icon.trigger ~ .btn-actions {
    top: 2px !important;
  }

  input[type='text'].timepicker.field-options ~ .btn-icon.trigger ~ .btn-actions {
    top: -1px !important;
  }

  .timepicker.field-options ~ .btn-icon.trigger {
    top: 0;
  }

  .datepicker.field-options ~ .btn-icon.trigger {
    top: 26px;
  }

  .lookup-wrapper .lookup.field-options ~ .btn-icon.trigger ~ .btn-actions.btn-menu {
    margin-left: 1px;
    top: 5px;
  }

  .searchfield-wrapper.has-close-icon-button {
    .btn-icon.close:not(.is-empty) {
      right: 41px;
      top: 3px;
    }
  }

  .spinbox-wrapper .btn-actions {
    top: 5px !important;
  }

  .spinbox.field-options {
    width: 208px;
  }

  .colorpicker-container ~ .btn-actions {
    top: -8px;
  }

  .checkbox ~ .btn-actions {
    left: 4px;
    top: 2px;
    width: 24px;
  }

  [data-clearable='true'] + .icon.close {
    top: -5px;

    ~ .icon.close.is-empty ~ .btn-actions {
      left: -4px;
    }
  }

  .searchfield-wrapper.has-focus:not(.toolbar-searchfield-wrapper) .btn-actions,
  .searchfield-wrapper .btn-actions {
    left: -2px !important;
    top: -1px;
  }

  .searchfield-wrapper.has-close-icon-button .searchfield {
    ~ .icon.close {
      right: 48px;
      top: 8px;
    }
  }

  .textarea ~ .btn-actions,
  .textarea ~ .btn-actions {
    left: auto !important;
    margin-left: -2px;
    top: calc(50% - 2px);
  }

  .fileupload {
    ~ .trigger-close:not(.is-visible) ~ .btn-actions {
      left: -1px;
    }

    ~ .trigger-close.is-visible ~ .btn-actions {
      left: 27px !important;
    }
  }

  .fileupload.field-options ~ .trigger-close:not(.is-visible) ~ .btn-actions.btn-menu:not(.is-checkbox) {
    margin-left: 0;
  }
}

.form-layout-compact {
  .radio-group .field-options {
    margin-left: -2px;

    .btn-actions {
      left: -13px !important;
    }
  }

  .compound-field .field.is-fieldoptions:first-child input[type='text'] ~ .btn-actions:not(.is-checkbox) {
    left: -4px;
    top: 1px;
  }

  .compound-field .field.is-fieldoptions input[type='text'] ~ .btn-actions:not(.is-checkbox) {
    left: -4px;
  }
}

// Safari
.is-safari {
  .field-options {
    &.timepicker,
    &.datepicker {
      ~ .btn-actions {
        left: -9px;
      }
    }
  }

  .field-short.is-fieldoptions,
  .form-layout-compact .field.is-fieldoptions {
    .field-options ~ .close ~ .btn-actions,
    input[type='text'][readonly]:not(.fileupload) ~ .btn-actions {
      top: 1px;
    }
  }
}

// Edge
.ie,
.ie-edge,
.ie-edge17 {
  // Non Compact Mode
  form:not(.form-layout-compact) {
    .field.is-fieldoptions {
      .dropdown-wrapper {
        ~ .btn-actions:not(.is-checkbox) {
          top: 2px;
          left: -11px;
        }
      }

      .spinbox-wrapper {
        .btn-actions:not(.is-checkbox) {
          left: -8px !important;
        }
      }

      button.close:not(.is-empty) {
        ~ .btn-actions:not(.is-checkbox) {
          left: -36px;
        }
      }

      textarea {
        ~ .btn-actions:not(.is-checkbox) {
          left: auto;
          margin-left: -8px;
        }
      }
    }

    .compound-field {
      .field.is-fieldoptions {
        input[type='text'] {
          ~ .btn-actions:not(.is-checkbox) {
            top: 0;
          }
        }
      }
    }
  }

  // Compact Mode
  .form-layout-compact .field.is-fieldoptions {
    .btn-actions:not(.is-checkbox) {
      left: -2px !important;
    }

    input[type='text'][data-clearable='true'] {
      ~ button.close:not(.is-empty) {
        ~ .btn-actions {
          left: -25px !important;
        }
      }
    }

    .field-options.textarea {
      ~ .btn-actions {
        left: auto !important;
      }
    }

    .field-options.dropdown,
    .field-options.multiselect {
      ~ .btn-actions:not(.is-checkbox) {
        top: 2px;
      }
    }

    .field-options.fileupload {
      ~ .trigger-close.is-visible ~ .btn-actions {
        left: 27px !important;
      }

      ~ .btn-actions {
        left: 5px !important;
        top: -1px;
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .field.is-fieldoptions {
    .btn-actions:not(.is-checkbox) {
      left: auto;
      right: -12px;
      margin-right: 1px;
    }

    &.is-active .btn-actions:not(.is-checkbox) {
      margin-right: 0;
    }

    .dropdown-wrapper {
      ~ .btn-actions:not(.is-checkbox) {
        left: auto;
        right: -12px;
        top: 2px;
      }
    }

    .dropdown,
    .multiselect {
      ~ .btn-actions:not(.is-checkbox) {
        left: auto;
        right: -10px;
      }
    }

    .lookup-wrapper {
      .btn-actions:not(.is-checkbox) {
        left: auto;
        right: -1px;
      }
    }

    .spinbox-wrapper {
      .btn-actions {
        left: auto;
        right: -9px;
      }
    }

    .colorpicker-container {
      ~ .btn-actions {
        left: auto;
        right: -12px;
      }
    }

    .searchfield-wrapper {
      .btn-actions {
        left: auto;
        right: -7px;
      }
    }

    .searchfield-wrapper.has-focus:not(.toolbar-searchfield-wrapper) .btn-actions,
    .searchfield-wrapper .btn-actions {
      left: auto;
      right: -9px;
    }

    textarea {
      ~ .btn-actions:not(.is-checkbox) {
        left: auto;
        margin-left: 0;
        margin-right: -8px;
        right: auto;
      }
    }

    .fileupload {
      ~ .trigger-close:not(.is-visible) ~ .btn-actions {
        left: auto;
        margin-right: 31px;
        right: -5px;
      }

      ~ .trigger-close.is-visible ~ .btn-actions {
        left: auto;
        right: 16px;
      }
    }
  }

  .radio-group .btn-actions {
    margin-right: 8px;
  }

  // Compact Layout RTL
  .field-short.is-fieldoptions,
  .form-layout-compact .field.is-fieldoptions {
    .btn-actions:not(.is-checkbox) {
      left: auto;
      right: -1px;
    }

    .dropdown-wrapper ~ .btn-actions {
      right: -4px;
    }

    input[type='text']:not(.spinbox):not(.searchfield):not(.fileupload) {
      ~ .btn-actions {
        right: -3px;
      }
    }

    .searchfield-wrapper.has-focus:not(.toolbar-searchfield-wrapper) .btn-actions,
    .searchfield-wrapper .btn-actions {
      right: -2px;
    }

    .textarea ~ .btn-actions {
      left: auto !important;
      margin-left: 0;
      margin-right: -2px;
      right: auto;
    }

    .lookup-wrapper .lookup.field-options ~ .btn-icon.trigger ~ .btn-actions {
      right: 2px;
      top: 5px;
    }

    .spinbox-wrapper .btn-actions {
      left: auto;
      right: -3px;
    }

    .colorpicker-container ~ .btn-actions {
      left: auto;
      right: -3px;
    }

    .fileupload {
      ~ .trigger-close:not(.is-visible) ~ .btn-actions {
        left: auto;
        margin-right: 37px;
        right: -2px;
      }

      ~ .trigger-close.is-visible ~ .btn-actions {
        left: auto;
        right: 27px;
      }
    }
  }

  .form-layout-compact {
    .radio-group .field-options {
      margin-left: 0;
      margin-right: -2px;

      + .btn-actions {
        left: auto;
        right: -18px;
      }
    }
  }
}