// Form Inputs
.c-input {
  @include input;

  &-right-icon {
    padding-right: $control-icon-padding;
  }

  &-icon + & {
    padding-left: $control-icon-padding;
  }

  &-label {
    @include label;
  }
}


// Form Input Right Icon
.c-input-icon {
  position: absolute;
  top: $control-padding;
  left: $control-padding;
  bottom: $control-padding;
  color: $control-icon-color;

  .c-input ~ & {
    left: auto;
    right: $control-padding;

    &-lg {
      right: $control-padding * 2;
    }
  }
}


// Form Input Left Icon
@each $name, $data in $control-sizes {
  $height: map-get($data, height);
  $padding: map-get($data, padding);
  $font-size: map-get($data, font-size);

  .c-input-icon-#{$name} {
    font-size: $font-size;
    left: $font-size - 4;
    top: $font-size - 4;
    bottom: $font-size - 4px;


    + .c-input {
      padding-left: $height;
    }
  }
}


// Form Input Textarea
textarea.c-input {
  height: auto;
  padding-top: $control-padding;
}


// Form Input Colors
@each $name, $color in $theme-colors {
  .c-input-#{$name} {
    &,
    &:hover {
      border-color: $color;
    }

    &:focus {
      border-color: $control-active-border;
    }

    & ~ .c-input-icon {
      color: $color;
    }
  }
}

// map to danger class for backwards compatibility
.c-input-error {
  @extend .c-input-danger;
}

// Form Input Sizes
@each $name, $data in $control-sizes {
  $height: map-get($data, height);
  $padding: map-get($data, padding);
  $font-size: map-get($data, font-size);

  .c-input-#{$name} {
    font-size: $font-size;
    height: $height;
    padding: $padding;
  }

  .c-input-label-#{$name} {
    font-size: $font-size;
  }
}


// Form Input Addons
.c-input-addon {
  display: flex;
  align-items: center; // vertically align all child elements
  border: $control-border;
  font-size: $control-font-size;
  padding: $space-0 $control-padding;
  background-color: $control-addon-background;

  &:first-child {
    border-radius: $control-border-radius $radius-0 $radius-0 $control-border-radius;
  }

  &:last-child {
    margin-right: $space-0;
    border-left: $space-0;
    border-radius: $radius-0 $control-border-radius $control-border-radius $radius-0;
  }
}


// Form Fieldset
.c-fieldset {
  &,
  &.c-list {
    display: block;
    width: 100%;
    margin: $control-padding * 2 $space-0;
    padding: $space-0;
    border: 0;
  }

  &-legend {
    @include label;

    padding: 0.3em 0;
  }

  &:disabled,
  &-disabled {
    .c-input {
      @include input-disabled;
    }
  }
}


// Form Hint & Hint Colors
.c-hint {
  opacity: 0;
  display: block;
  transform: scale(.8);
  pointer-events: none;
  transform-origin: top left;
  color: $control-hint-color;
  padding-top: $control-padding;
  font-size: $control-hint-font-size;
  transition: $control-hint-transition;

  &-static,
  .c-input:focus ~ & {
    transform: scale(1);
    opacity: 1;
  }

  @each $name, $color in $theme-colors {
    &-#{$name} {
      color: $color;
    }
  }

  &-error {
    color: $color-danger;
  }
}


// Form Input Group & Group Stacked
.c-input-group {
  display: flex;

  .c-btn,
  .c-input-addon,
  .c-input-container {
    &:not(:first-child) {
      margin-left: -1px;
    }
  }

  .c-input-container {
    z-index: 1;

    &:hover,
    &:focus,
    &:active {
      z-index: 1;
    }
  }

  .c-btn {
    &:focus,
    &:active {
      z-index: 2;
    }

    & > *:first-child {
      &,
      .c-btn {
        border-top-right-radius: $radius-0;
        border-bottom-right-radius: $radius-0;
      }
    }

    > *:last-child {
      &,
      .c-btn {
        border-top-left-radius: $radius-0;
        border-bottom-left-radius: $radius-0;
      }
    }

    > *:not(:first-child):not(:last-child) {
      border-radius: $radius-0;
    }
  }

  .c-input-container {
    flex: 1 0 auto;

    &-fixed {
      flex: 0 1 auto;
    }

    // .c-input {
    //   height: 100%;
    // }

    &:first-child .c-input {
      border-top-right-radius: $radius-0;
      border-bottom-right-radius: $radius-0;
    }

    &:last-child .c-input {
      border-top-left-radius: $radius-0;
      border-bottom-left-radius: $radius-0;
    }

    &:not(:first-child):not(:last-child) .c-input {
      border-radius: $radius-0;
    }
  }
}

.c-input-group-stacked {
  display: flex;
  flex-wrap: wrap;

  .c-btn,
  .c-input-addon,
  .c-input-container {
    &:not(:first-child) {
      margin-left: $space-0; // reset margin from .c-input-group
      margin-top: -1px;
    }
  }

  .c-input-container,
  .c-btn {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: $space-0;
  }

  .c-btn {
    &:not(:first-child):not(:last-child) {
      border-radius: $radius-0;
    }

    &:first-child {
      border-radius: $control-border-radius $control-border-radius $radius-0 $radius-0;
    }

    &:last-child {
      border-radius: $radius-0 $radius-0 $control-border-radius $control-border-radius;
    }
  }

  .c-input-container {
    &:not(:first-child):not(:last-child) .c-input {
      border-radius: $radius-0;
    }

    &:first-child .c-input {
      border-radius: $control-border-radius $control-border-radius $radius-0 $radius-0;
    }

    &:last-child .c-input {
      border-radius: $radius-0 $radius-0 $control-border-radius $control-border-radius;
    }
  }
}

// Form Results
.c-input-results {
  .c-input {
    border-bottom-left-radius: $radius-0;
    border-bottom-right-radius: $radius-0;
  }

  &-menu {
    position: absolute;
    left: 0;
    right: 0;
    background: $color-white;
    box-shadow: 2px 5px 4px rgba(0, 0, 0, .05);
    border: $control-border;
    border-top: 0;
    list-style: none;
    margin-left: $space-0;
    border-bottom-left-radius: $control-border-radius;
    border-bottom-right-radius: $control-border-radius;

    li {
      padding: $space-sm;

      &:not(:last-child) {
        border-bottom: $control-border;
      }
    }
  }
}


// Form Inline
.c-form-inline {
  display: flex;
  flex: 0 0 auto;
  align-items: center;

  .c-input-label {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-input {
    width: auto;
    display: flex;
    vertical-align: middle;
  }

  .c-hint {
    margin: $space-0;
    position: relative;
  }
}

// Form Input Colors (NG specific)
@if $enable-NGform-colors == true {
  @each $ng-state, $color in $control-ng-validation {
    .c-input.ng-dirty.#{$ng-state} {
      border: 1px solid $color;

      .c-input-icon {
        color: $color;
      }
    }

    .ng-dirty.#{$ng-state} {
      .c-input {
        border: 1px solid $color;

        .c-input-icon {
          color: $color;
        }
      }
    }
  }
}


.c-form-group {
  display: block;
  margin-bottom: $control-padding * 2;
}