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

.ui-form {
  // .ui-column {
  //   @include flex-basis(18em);
  // }
  .ui-col-form .ui-input-group {
    min-width: 18em;
  }

  &.ui-floating {
    max-height      : 20rem;
    background-color: $menu-dropdown-bg;
    border-radius   : $base-border-radius;
    position        : fixed;
    display         : none;
    z-index         : $z-index-floating;
    @include box-shadow(0 0 2px 0 $base-shadow-color);

    &.ui-tether-top {
      box-shadow: 0 1px 2px 0 $base-shadow-color;
    }

    &.ui-tether-bottom {
      box-shadow: 0 -1px 2px 0 $base-shadow-color;
    }

    &.ui-open {
      display: block;
    }
  }
}

.ui-fieldset {
  fieldset {
    margin       : 0.25em 0.5em;
    padding      : 0.25em 0.5em;
    max-height   : 150em;
    border-radius: $base-border-radius;
    border       : 1px solid rgba($base-border-color, .5);
    @include transition(max-height .5s);
  }

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

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

  &.ui-collapse fieldset {
    overflow  : hidden;
    max-height: 1.5em;
  }
}

.ui-input-addon {
  padding    : 0 0.25em;
  line-height: 1.5em;
  @include flex-auto();
}

.ui-option {
  padding    : 0.15em 0.25em;
  line-height: 1em;
  @include flex-auto();
}

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

  .ui-input-label {
    @include flex(0 0 8em);
    @include padding(end, .5em);
    position   : relative;
    color      : $input-label-text;
    font-size  : 0.8em;
    line-height: 1.5rem;

    &.ui-required:after {
      content    : '*';
      font-size  : 0.5rem;
      color      : $secondary;
      margin     : 0 0.1em;
      top        : -.5em;
      line-height: 1rem;
      position   : relative;
    }

    &.ui-align-top {
      @include flex-basis(100%);
    }
  }

  &.ui-focus .ui-input-label {
    font-weight: 600;
  }

  .ui-input-info {
    font-size  : 0.7em;
    line-height: 1em;
    padding    : 0 0.25em;
  }

  > div {
    @include flex(1 1 15em);
  }

  .ui-group-wrapper {
    border-radius: 0.1em;
    color        : $input-label-text;
    background   : darken($input-bg, 1%);
    box-shadow   : 0 0 0 1px rgba($black,.08);
    @include flex-row($display: flex, $align: stretch, $wrap: false);

    .ui-input-control {
      box-shadow: none;
    }
  }

  .ui-button {
    padding    : 0.2em;
    font-size  : 0.9rem;
    font-weight: 600;
    line-height: 1rem;
  }

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