.field-helper {
  position: relative;
  display: inline-block;

  .error-inline {
    .position (@rtl) when (@rtl = false) {
      right: 100%;
    }
    .position (@rtl) when (@rtl = true) {
      left: 100%;
    }

    visibility: hidden;
    position: absolute;
    top: (@spacingXs/-2);
    .position(@rtl);
    padding: (@spacingXs/2) @spacingM;
    margin: 0;
    z-index: 2;
    line-height: 2.3em;
    white-space: nowrap;
    background: @errorText;
    color: @white;
    border-radius: @borderRadiusS;
    box-shadow: 1px 1px 5px fade(@black, 30%);
    opacity: 0;

    .transition(~"margin .3s, opacity .3s");

    &:after {
      .arrow (@rtl) when (@rtl = false) {
        right: 0;
        border-left: 8px solid @errorText;
      }
      .arrow (@rtl) when (@rtl = true) {
        left: 0;
        border-right: 8px solid @errorText;
      }

      content: "";
      position: absolute;
      top: 50%;
      .arrow(@rtl);
      margin-top: -6px;
      .margin-right(@rtl, -8px);
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }

    .error & {
      visibility: visible;
      opacity: 1;
      .margin-right(@rtl, @spacingM);
    }
  }
}

.field-helper-right {
  .error-inline {
    .position (@rtl) when (@rtl = false) {
      left: 100%; right: auto;
    }
    .position (@rtl) when (@rtl = true) {
      right: 100%; left: auto;
    }

    .position(@rtl);

    &:after {
      .arrow (@rtl) when (@rtl = false) {
        left: 0; right: auto;
        border-right: 8px solid @errorText;
        border-left: 0;
      }
      .arrow (@rtl) when (@rtl = true) {
        right: 0; left: auto;
        border-left: 8px solid @errorText;
        border-right: 0;
      }

      .arrow(@rtl);
      .margin-left(@rtl, -8px);
    }

    .error & {
      .margin-left(@rtl, @spacingM);
    }
  }
}

.field-helper-bottom, .field-helper-flow {
  .error-inline {
    &:after {
      .position (@rtl) when (@rtl = false) {
        left: 0; right: auto;
      }
      .position (@rtl) when (@rtl = true) {
        right: 0; left: auto;
      }

      top: 0;
      margin-top: -14px;
      .margin-left(@rtl, @spacingM);
      .position(@rtl);
      border-bottom: 8px solid @errorText;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }

    .error & {
      margin: 0;
    }
  }
}

.field-helper-bottom {
  .error-inline {
    .position (@rtl) when (@rtl = false) {
      left: 0; right: auto;
    }
    .position (@rtl) when (@rtl = true) {
      left: auto; right: 0;
    }

    top: 100%;
    .position(@rtl);
  }
}

.field-helper-flow {
  .error-inline {
    position: relative;
    left: 0; right: auto; top: 0;
    display: none;

    .error & {
      display: block;
      margin-right: 0;
    }
  }
}