.fsa-affix {

  & {
    border: 1px solid $form-outline-color;
    display: inline-flex;
    align-items: stretch;
    background-color: $color-white;
    .fsa-spinbox--error & {
      border-color: $form-error-color;
      box-shadow: 0 0 0 1px $form-error-color inset;
      background-color: $form-error-color-bg;
    }

    &:focus-within {
      outline: 3px solid $color-focus;
    }
  }

  &__item {
    display: block;
    width: 100%;
    border: 0;
    &:focus {
      outline: none !important;
      box-shadow: none !important;
    }
  }

  &--fill,
  &--block {
    display: flex;
    width: 100%;
  }

  &--error {
    border-color: $form-error-color;
    box-shadow: 0 0 0 1px $form-error-color inset;
    background-color: $form-error-color-bg;
    .fsa-input {
      z-index: -1;
    }
  }

  &--disabled {
    background-color: $form-disabled-bg-color;
    color: $form-text-color-disabled;
  }

  &--readonly {
    background-color: $color-fsa-base-bg;
  }

  &__prefix,
  &__suffix {
    & {
      display: flex;
      align-items: center;
      color: $color-fsa-tertiary-300;
      font-weight: bold;
      cursor: text;
    }
    .fsa-affix--disabled & {
      color: $form-text-color-disabled;
    }
    .fsa-affix--readonly & {
      color: $form-text-color-disabled;
      cursor: default;
    }
  }

  &__prefix {
    padding-left: $size-small;
    &,
    & + .fsa-input--large {
      padding-left: $size-small;
    }
  }

  &__suffix {
    padding-right: $size-small;
  }

}