@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-field-label-width: 6.2em !default;
$ink-field-label-margin-right: $ink-spacing-sm !default;
$ink-field-error-color: $ink-color-error !default;
$ink-field-error-font-size: $ink-font-size-sm !default;
$ink-field-error-line-height: $ink-line-height-sm !default;

.ink-field {
  box-sizing: border-box;
  display: flex;

  .ink-cell__title {
    width: $ink-field-label-width;
    margin-right: $ink-field-label-margin-right;
    flex: 0 0 auto;
  }

  &__body {
    flex: 1;
    display: flex;
    flex-direction: column;

    &--left {
      align-items: flex-start;
    }

    &--center {
      align-items: center;
    }

    &--right {
      align-items: flex-end;
    }
  }

  &__error {
    color: $ink-field-error-color;
    font-size: $ink-field-error-font-size;
    line-height: $ink-field-error-line-height;
  }
}