
fieldset {

}


legend {
  border-bottom: 1px solid scale_color($input-color, $lightness: 75%);
  //color: scale_color($input-color, $lightness: 50%);
  font-weight: $font-weight-bold;
  @include font-size($font-size-lg);
}


.form-group {
  .row {
    margin-top: 0;
    padding-top: 0;
    @include make-row($form-grid-gutter-width*2);

    > div {
      @include make-col-ready($form-grid-gutter-width*2)
    }
  }
}


.form-control {
  font-size: 1.1em;
  padding-top: ($input-padding-y / .8);
  padding-bottom: ($input-padding-y / 1.2);
  transition: all .15s;

  &::placeholder {
    color: $input-color;
    transition: all .15s;
    font-size: .9em;
  }

  &:focus {
    border-bottom-color: $input-color;
  }
}


.has-floatinglabel {
  position: relative;

  .control-label {
    position: absolute;
    transition: all .15s;
    font-size: smaller;
    color: $input-placeholder-color;
    top: ($input-padding-y / 2);
    left: $input-padding-x;
    opacity: 1;
  }

  &.js-hide-label {

    .form-control {
      padding-top: $input-padding-y;
      padding-bottom: $input-padding-y;

      &::placeholder {
        color: darken($input-placeholder-color, 20%);
      }
    }

    .control-label {
      top: ($input-padding-y / 1);
      opacity: 0;
    }
  }

}


.has-error {
  .form-control {
    border-bottom-color: scale_color($danger, $lightness: 10%);
  }

  .control-label {
    color: $danger;
  }
}


select {
  appearance: unset !important;

  .has-floatinglabel.js-hide-label & {
    color: darken($input-placeholder-color, 20%);
  }
}


.repeatable-container {

  &[data-is-copy] {
    position: relative;
    border-top: 1px solid scale_color($input-color, $lightness: 90%);
    padding-top: $form-group-margin-bottom;;
  }

  button[data-remove-button] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(100%, -50%);
    transition: $transition-base;
    opacity: 0;

    &:hover ~ * {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .5);
      }
    }
  }

  &:hover {
    button[data-remove-button] {
      opacity: 1;
      transform: translate(0, -50%);
    }
  }
}


.form-navigation {
  .btn-toolbar {
    //justify-content: flex-end;
  }

  .btn-group {
    flex: 1 1 auto;
    justify-content: space-between;

    .next {
      margin-left: auto;
    }
  }

}


.form-summarypage {
  margin-bottom: $form-grid-gutter-width*2;
  .field {
    @include make-row();
    align-items: baseline;
  }

  .field-label, .field-value {
    display: table-cell;
    line-height: 1.6rem;
    @include make-col-ready();
  }

  .field-label {
    @include make-col(3);
    font-size: $font-size-sm;
    color: darken($input-placeholder-color, 20%);

  }

  .field-value {
    @include make-col(9);
  }

  .fieldset-title {
    @extend legend;
    color: $input-color;
    margin-top: $form-grid-gutter-width*2;
  }

  .repeatable-title {
    @extend legend;
    color: $input-color;
    margin-top: $form-grid-gutter-width*2;
    font-weight: inherit;
  }
}
