//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-form {
  .ui-col-form .ui-input-group {
    min-width: 18em;
  }
}

.ui-fieldset {
  margin       : 0.25em 0.5em;
  padding      : 0;
  border-radius: $base-border-radius;
  border       : 1px solid rgba($base-border-color, .25);

  > div {
    max-height: 150em;
    @include transition(max-height 0.5s);
  }

  legend {
    font-size: 0.9em;
    padding  : 0 0.25em;
    margin   : 0 0.5em;

    > span {
      color: $input-label-text;
    }
  }

  &.ui-collapse > div {
    overflow  : hidden;
    max-height: 0;
  }
}

.ui-input-group {
  @include flexbox($direction: row, $align:flex-start);
  margin   : 0.5em 0.25em;
  max-width: 100%;

  .ui-input-label {
    position   : relative;
    font-size  : 0.85em;
    color      : rgba($input-label-text, .8);
    line-height: 2.5;
    text-align : if($input-label-align == start, left, right);
    text-align : $input-label-align;
    @include flexbox($justify: flex-end, $align: center, $wrap: false);
    @include flex(0 0 8em);

    > span {
      flex       : 1;
      line-height: 1;
      @include ellipsis();
    }

    &:after {
      content : '*';
      color   : rgba(0,0,0,0);
      position: relative;
      padding : 0 0.25em;
    }

    &.ui-required:after {
      color: $secondary;
    }

    &.ui-align-top {
      flex-basis: 100%;
      @include justify-content(flex-start);

      > span {
        flex: 0;
      }
    }
  }

  &.ui-focus .ui-input-label {
    // color      : $input-label-text;
    font-weight: 400;
  }

  .ui-input-info {
    font-size: 0.8em;
    color    : $muted;
  }

  .ui-input-addon {
    padding    : 0.5em;
    line-height: 1.2;
    @include flex-auto();

    .ui-option,
    .ui-switch {
      padding    : 0;
      line-height: 1;
      font-size  : 1em;

      .ui-option-label {
        padding: 0;
      }
    }
  }

  > div {
    line-height: 2.2;
    @include flex(1 0 1em);
  }

  .ui-group-wrapper {
    background: $input-bg;
    color     : $input-text;
    box-shadow: 0 0 0 1px rgba($base-border-color, .2);
    @include flexbox($direction: row, $display: flex, $align: stretch, $wrap: false);
  }

  .ui-button {
    margin    : 0;
    align-self: stretch;
  }

  .ui-dropdown {
    margin: 0;
  }

  &.ui-plain .ui-group-wrapper {
    background: none;
    box-shadow: none;

    .ui-input-wrapper:not(.ui-focus) > .ui-input-control {
      box-shadow: 0 -1px 0 0 rgba($muted, .5) inset;
    }
  }

  &:not(.ui-plain) .ui-group-wrapper {
    .ui-dropdown {
      box-shadow: none;
    }
  }

}