@import '~styles/mixins';

.FormElement {
  position: relative;
  font-weight: 500;
  line-height: 1;
  font-size: $font_size_form;
  letter-spacing: $form_element_letter_spacing;

  margin-top: $form_spacing;

  color: $color_font;

  &.no-margin {
    margin-top: 0;
  }

  &.with-icon-left {
    .child-form-element {
      padding-left: $width_outside_icon_form;
    }
  }
  &.with-icon-right {
    .child-form-element {
      padding-right: $width_outside_icon_form;
    }
  }

  .outside-icon-left,
  .outside-icon-right {
    bottom: 0;
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0;
    width: $width_outside_icon_form;
  }

  .outside-icon-right {
    left: auto;
    right: 0;
  }

  input,
  textarea {
    margin: 0;
    color: inherit;
    font-size: inherit;
    width: 100%;

    &[disabled] {
      cursor: not-allowed;
    }
  }

  input {
    padding: $input_padding_v 0;
  }

  textarea {
    margin: $input_padding_v 0;
    padding: 0;
  }

  &.no-label {
    textarea {
      padding: $input_padding_v 0;
      margin: 0;
    }
  }

  .error-message {
    margin-top: $form_element_vertical_spacing;
    font-size: $font_size_field_message;
    color: $color_error;
  }

  .warning-message,
  .info-message {
    margin-top: $form_element_vertical_spacing;
  }
  .warning-message {
    @include warning($color_warning);
  }

  .info-message {
    @include warning($color_info_message);
  }
}
