$inner-border-radius: 0px;
$outer-border-radius: 4px;

.form {
  &--centered {
    @include shift(3.5);
    @include span-columns(5);

    @include media($lg-screen) {
      @include shift(2);
      @include span-columns(8);
    }

    @include media($md-screen) {
      @include shift(0);
      @include span-columns(12);
    }

    padding-top: 10vh;

    button, input[type="submit"] {
      width: 100%;
    }
  }
}

.input-section {
  display: flex;
  flex-direction: row;
  margin: 20px 0;

  &__label {
    font-weight: 700;
    width: 140px;
  }

  &__content {
    flex-grow: 1;
  }

  .select-country select {
    width: 100%;
  }
}

.input-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .input--state {
    width: 48%;

    .select-state select {
      width: 100%;
    }
  }

  .input--state,
  .input--zipcode {
    width: 48%;
  }
}

.input-group {
  @include clearfix;

  display: table;
  margin: 0 0 1.5em 0;
  position: relative;
  max-width: 100%;
  width: 100%;

  &--centered {
    text-align: center;
  }

  &--disabled {
    opacity: 0.5;
  }

  &--hidden:not(.has-error) {
    display: none;
  }

  &--radio {
    margin-bottom: 0.5em;

    input {
      float: left;
      margin: 3px 8px 3px 0;
    }
  }

  .input-group {
    margin-bottom: 0;
  }

  #{$all-text-inputs} {
    border-radius: $outer-border-radius;
    float: left;
    max-width: 100%;
    width: 100%;

    &.input-control {
      max-width: 440px;

      &--medium {
        max-width: 300px;
      }
    }

    &:first-child {
      border-bottom-left-radius: $outer-border-radius;
      border-top-left-radius: $outer-border-radius;
    }

    &:last-child {
      border-bottom-right-radius: $outer-border-radius;
      border-top-right-radius: $outer-border-radius;
    }
  }

  > #{$all-buttons}, > .button {
    margin-right: 5px;

    &:last-child {
      margin-right: 0px;
    }

    &.right {
      margin-left: 5px;
      margin-right: 0px;
      &:last-child {
        margin-left: 0px;
      }
    }
  }

  .ember-radio-button {
    display: block;
    margin: 0 0 0.5em 0;
  }

  .row {
    display: flex;
    justify-content: space-between;
  }

  .icon-input {
    padding-left: 35px;
  }

  .icon-label {
    &:before {
      content: '';
      position: absolute;
      top: 9px;
      left: 8px;
    }
  }
}

.input-control-group {
  position: relative;

  &__prefix {
    position: absolute;
    left: 10px;
    top: 10px;
  }

  #{$all-text-inputs} {
    padding-left: 25px;
  }
}

.input-group.has-error {
  input, textarea { border-color: $red; }
  .input-label label { color: $red; }
}

.input-label {
  label {
    align-items: center;
    color: $text--dark;
    display: flex;
    font-size: $body-font-size-normal;
    font-weight: 600;
    margin-bottom: 5px;
  }

  &__icon, &__text {
    padding-right: 5px;
  }

  &__help {
    color: $gray--dark;
    font-size: $body-font-size-small;
    font-weight: 500;
  }

  p {
    margin: 0 0 1em 0;
  }
}

.recommended-text {
  padding-right: 5px;
  font-size: $body-font-size-tiny;
  &:after {
    content: '(recommended)';
    color: $blue;
  }
}

.required-text {
  padding-right: 5px;
  font-size: $body-font-size-tiny;
  &:after {
    content: '(required)';
    color: $red;
  }
}

.input-group-addon {
  padding: 6px 12px;
  font-size: $body-font-size-small;
  line-height: 1;
  color: #333;
  text-align: center;
  background-color: $background-gray;
  border: 1px solid $gray;
  border-radius: $outer-border-radius;
  display: table-cell;
  line-height: 6px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;

  &:first-child {
    border-bottom-right-radius: $inner-border-radius;
    border-top-right-radius: $inner-border-radius;
    border-right-width: 0;
  }

  &:last-child {
    border-bottom-left-radius: $inner-border-radius;
    border-top-left-radius: $inner-border-radius;
    border-left-width: 0;
  }
}

.input-label {
  margin-bottom: 5px;
  font-size: 0.8em;
  font-weight: 700;
  display: block;
}

textarea {
  min-height: 100px;
}

.input-explain {
  margin: 0.5em 0 1em 0;

  p {
    color: $gray--dark !important;
    font-size: $body-font-size-small !important;
    font-weight: 500;
    margin: 0 0 5px 0;
    width: 100%;
  }
}

form {
  h2 {
    font-family: $body-font-family;
    font-size: $header-font-size-large;
    font-weight: 500;
    margin-bottom: 1em;
  }
}

.error {
  color: $red;
  margin: 1em 0;
}

p.input-error {
  color: $red !important;
  float: left;
  font-size: $body-font-size-small !important;
  margin: 0.5em 0;
  width: 100%;
}

.login-form, .signup-form, .reset-password-form, .forgot-password-form {
  .input-group {
    margin: 0 0 1em 0;
  }
}

.suggestions {
  position: absolute;
  right: -250px;
  width: 250px;

  p {
    font-size: $body-font-size-small;
    margin: 4px 0;

    &:before {
      content: "";
      display: block;
      float: left;
      height: 10px;
      margin: 11px 10px;
      width: 12px;
    }

    &.ok {
      &:before { @include sprite($tick-blue); }
    }

    &.not-ok {
      color: $red;

      &:before { @include sprite($cross-red); }
    }

    &.simple {
      ul {
        padding-top: 7px;
      }
    }

    ul {
      padding-left: 36px;
    }

    li {
      margin-bottom: 2px;
      &.highlight {
        color: $blue;
      }
    }
  }
}

.strength {
  position: absolute;
  right: 10px;
  top: 40px;
  width: 50px;

  .progress-bar-container {
    height: 10px;
  }
}

select {
  border: 1px solid $gray;
  font-family: $body-font-family;
  font-size: $body-font-size-normal;
  height: 38px;
  padding: 0 16px;
  cursor: pointer;
}

.settings-form {
  display: flex;

  &__form {
    margin-left: 20px;
    max-width: 500px;
    width: 100%;
  }
}
