///
/// Input
///
.o-input {
  display: inline-flex;
  position: relative;

  input {
    &:not(:first-child) {
      padding-left: $form-ctrl-height;
    }
  }

  /// @todo refatorar side-effect
  // O Orquestra adiciona um elemento `em` logo após o input
  // fazendo com que este nunca seja o último elemento.
  // Inviabiliza o uso com `input:not(:last-child)`
  &.-posfix {
    input {
      padding-right: $form-ctrl-height;
    }
  }

  &.-center {
    input { text-align: center; }
  }

  > .o-input-icon {
    &:first-child {
      left: 0;
    }

    &:last-child {
      right: 0;
    }
  }

  &.-loading {
    &::after {
      @include loader($form-ctrl-border-color);

      left: initial;
      top: 10px;
      right: 10px;
    }

    input {
      padding-right: $form-ctrl-height;
    }

    .o-input-icon:last-child {
      display: none;
    }
  }
}

///
/// Input Icon
///
.o-input-icon {
  position: absolute;
  line-height: $form-ctrl-height;
  width: $form-ctrl-height;
  text-align: center;
  font-size: $form-ctrl-font-size;
  color: $color-grey-400;
  z-index: 2;
}

///
/// Input Group
///
.o-input-group {
  display: flex;

  // Ocultar `em` (texto de ajuda) do Zeev BPMS
  em {
    display: none;
  }

  input {
    position: relative;

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 1px solid transparent;
    }

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: 1px solid transparent;
    }

    &:focus {
      z-index: 2;
    }
  }

  &.-center {
    input { text-align: center; }
  }

  > .o-input-addon {
    &:first-child {
      border-left: $form-ctrl-border;
      border-radius: $form-ctrl-radius 0 0 $form-ctrl-radius;
    }

    &:last-child {
      border-right: $form-ctrl-border;
      border-radius: 0 $form-ctrl-radius $form-ctrl-radius 0;
    }
  }

  // Necessário colocar os inputs em containers visto
  // que o Zeev adiciona tags `em` ao final dos inputs
  // impossibilitando a abordagem apenas com pseudos
  .o-input {
    input {
      padding: 4px 6px;
      border: $form-ctrl-border;
      border-radius: $form-ctrl-radius;
    }

    &:not(:first-child) {
      input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 1px solid transparent;
      }
    }

    &:not(:last-child) {
      input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 1px solid transparent;
      }
    }
  }

  ///
  /// Mensagens de Validação
  ///
  & + .o-form-hint {
    position: relative;
    top: -24px;
    bottom: 0;
    height: 0;
  }

  ///
  /// Validation States
  ///
  &.-success {
    @include ctrl-success;
  }

  &.-error {
    @include ctrl-error;
  }
}

///
/// Input Addon
///
.o-input-addon {
  margin-left: -2px;
  margin-right: -2px;
  padding: 0 $space-1 + 2px;
  height: $form-ctrl-height;
  min-width: 24px;
  background-color: #fff;
  font-size: $form-ctrl-font-size;
  line-height: 28px;
  text-align: center;
  white-space: nowrap;
  color: $color-grey-400;
  border-top: $form-ctrl-border;
  border-bottom: $form-ctrl-border;
  z-index: 1;

  &.-colored {
    background-color: $color-grey-0;
    color: $color-grey-500;
    border: $form-ctrl-border;
  }
}