// Objects :: Forms

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-form {
  width: 100%;

  &--small {
    width: 320px;
  }

  &--wide {
    width: 768px;
  }

  &--lighten {
    background-color: fabric-color('white');
  }
}

.c-form__group {
  border: none;
  border-bottom: 1px solid fabric-color('medium-grey');
  padding: 0;

  &:last-of-type {
    border-bottom: none;
    padding: 0;
  }

  .c-form--lighten & {
    border-color: fabric-color('light-grey');
  }

  &--inline {
    @include flex();
  }

  &--lighten {
    background-color: fabric-color('white');
    color: fabric-color('medium-grey');
  }
}

.o-form__item {
  @include flex($direction: column);
  border: 0;

  &-wrapper {
    width: 100%;
  }

  .c-form-group--inline & {
    flex: 1;
  }

  &--inline-flex {
    display: inline-flex;
  }

  &--lighten {
    background-color: fabric-color('white');
  }

  &:last-of-type {
    margin-bottom: 0;
  }

  &__messages {
    @include flex($justify-content: space-between);
  }

  &--required {
    flex: auto;
    text-align: right;
  }
}

.c-form__label {
  color: fabric-color('medium-grey');
  margin-bottom: $fabric-global-spacing-unit-small;
}

.c-form__legend {
  @include fabric-font-size(18px);

  color: fabric-color('primary');
  margin-bottom: $fabric-global-spacing-unit-small;

  .c-form--lighten & {
    color: fabric-color('grey');
  }
}

.c-form-requirements {
  color: fabric-color('positive');
}

.c-form-input__icon {
  @include absolute(right $fabric-global-spacing-unit-small);

  color: fabric-color('grey');
}

.c-form-textarea__icon {
  @include absolute(
    top $fabric-global-spacing-unit-small right
      $fabric-global-spacing-unit-small
  );
}