@input-warning:     @gold;
@input-active:                  @pacific;

@input-bg-disabled:             @gray;
@input-border-disabled:         @gray-50;

// Insets
@input-inset-bg:                @gray-10;
@input-inset-selected:          @pacific-20;

.inline-signup {
  input {
    .webfont-regular();
    width: 70%;
    height: 34px;
    display: inline-block;
    border: 1px solid @gray-10;
  }
}


.select-content {
  overflow: hidden;
  position: relative;
  background: #fff url('../img/select.png') no-repeat right 0;
  border: solid 1px #d0d0ce;
  height: 32px;
  .webfont-medium();
}

.select-content:hover {
  background: #fff url('../img/select.png') no-repeat right -32px;
}


select {
  width: 120%;
  padding-right: 40px;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  border: 0;
  box-shadow: none;
  padding: 0 4px;
  font-size: 0.75em;
  color: @black;
  height: 32px;
  &[disabled] {
    color: @gray-10;
    font-style: italic;
  }
}

input {
  font-size: 0.75em;
}

.percent-input {
  input {
    padding-left: 15%;
  }
  .unit {
    left: auto;
    right: 25%;
  }
}

.inline-radio {
  display: inline-block;
  vertical-align: middle;
  margin-right: -4px; // remove extra inline-block space
}

.cf-input {

    @checkbox-width: unit( 18px / @base-font-size-px, em);
    @radio-width: unit( 17px / @base-font-size-px, em);

    &[type="checkbox"],
    &[type="radio"]{
        .u-visually-hidden();

        .lt-ie9 & {
            border: 0;
            float: left;
            margin: .4em .4em 0 0;
            position: static;
            width: auto;
        }
    }

    &[type="checkbox"] + label,
    &[type="radio"] + label {
        cursor: pointer;
        margin-bottom: 0.5em;
    }

    &[type="checkbox"] + label::before,
    &[type="radio"] + label::before {
        background: white;
        content: '\a0';
        display: inline-block;
        margin-top: unit( 2px / @base-font-size-px, em);
        margin-right: .6em;
    }

    &[type="radio"] + label::before {
        height: @radio-width;
        width: @radio-width;
        border-radius: 100%;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px @input-border;
    }

    &[type="radio"]:checked + label::before {
        background-color: @input-active;
        box-shadow: 0 0 0 2px @input-bg, 0 0 0 3px @input-active;
    }

    &[type="radio"]:hover + label::before {
        box-shadow: 0 0 0 2px @input-bg, 0 0 0 3px @input-active;
    }

    &[type="radio"]:focus + label::before {
        box-shadow: 0 0 0 1px @input-bg, 0 0 0 3px @input-active;
    }

    &[type="checkbox"] + label::before {
        height: @checkbox-width;
        width: @checkbox-width;
        box-shadow: 0 0 0 1px @input-bg, 0 0 0 2px @input-border;
    }

    &[type="checkbox"]:checked + label::before {
        content: @cf-icon-approved;
        font-family: 'CFPB Minicons';
        font-size: unit( 16px / @base-font-size-px, em);
        box-shadow: 0 0 0 1px @input-bg, 0 0 0 2px @input-active;
    }

    &[type="checkbox"]:hover + label::before {
        box-shadow: 0 0 0 1px @input-bg, 0 0 0 2px @input-active;
    }

    &[type="checkbox"]:focus + label::before {
        box-shadow: 0 0 0 2px @input-active;
    }

    &[type="checkbox"]:disabled + label {
        color: @input-border-disabled;
    }

    &[type="checkbox"]:disabled + label::before,
    &[type="radio"]:disabled + label::before {
      background: @input-bg-disabled;
      box-shadow: 0 0 0 1px @input-bg, 0 0 0 2px @input-border-disabled;
      cursor: not-allowed;
    }

}

.form-l {
    &__flush {
        .respond-to-min(768px, {
            .grid_nested-col-group();
        });
    }
    &__float {
        .respond-to-min(768px, {
            .u-clearfix();
            & .form-l_col {
                display: block;
                float: left;
                margin-right: 0;
            }
        });
    }
}

.form-l_col {
    // Eyeballed to 30px considering line-height.
    margin-bottom: unit(30px / @base-font-size-px, em);
}

.form-label-header + .form-l .form-label-header {
    // Override heading-5() settings.
    .webfont-regular();
    text-transform: none;
    margin-bottom: unit(10px / 14px, em);
}

.form-l {
    .respond-to-min(@tablet-min, {
        .grid_nested-col-group();
    });
}

.form-l_col input,
.form-l_col select {
    // TODO: Move border-box value to cf-forms.
    box-sizing: border-box;
    width: 100%;
}

.respond-to-min(@tablet-min, {
    .form-l_col-1-4 {
        .grid_column(3);
    }

    .form-l_col-1-2 {
        .grid_column(6);
    }

    .form-l_col-1-3 {
        .grid_column(4);
    }

    .form-l_col-2-3 {
        .grid_column(8);
    }

    .form-l_col-1 {
        .grid_column(12);
    }
});

.form-l-inset {
    border-right-width: 2.5px;
    + .form-l-inset { border-left-width: 2.5px; }
    &:last-child { border-right-width: 15px; }

      .form-l-inset_container {
          background: @input-inset-bg;

          .cf-input_label {
              margin: 0;
              padding: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em )
                   unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em )
                   unit( ( @grid_gutter-width / 1.75 ) / @base-font-size-px, em );
          }

          .cf-input_text {
              margin-left: unit( @grid_gutter-width / @base-font-size-px, em );
          }

          .cf-input_radio,
          .cf-input_checkbox {
              position: absolute;
              top: unit( ( @grid_gutter-width / 1.75 ) / @base-font-size-px, em );
              left: 15px;
              z-index: 3;
          }

          &:hover,
          &:focus,
          &.focus {
              .cf-input_checkbox,
              .cf-input_radio {
                  box-shadow: 0px 0px 0px 2px @input-border-focus;
                  // Older IE does not support border-radius or box-shadow it's ok to
                  // use outline here.
                  .lt-ie9 & {
                      outline: 1px solid @input-border-focus;
                  }
              }
          }

        &.selected .cf-input_label,
        &.focus .cf-input_label,
        &:focus .cf-input_label,
        &:hover .cf-input_label,
        input:focus + .cf-input_label,
        input:checked + .cf-input_label     {
            outline: 1px solid @input-border-focus;
        }

        &.selected .cf-input_label,
        input:checked + .cf-input_label {
            background-color: @input-inset-selected;
        }
    }
}

.form-l_col__flush-bottom {
  margin-bottom: 0;
}

.rating-inputs {
    .form-l-inset {
      border-left-width: 15px !important;
      border-right-width: 15px !important;
    }
    .cf-input_label {
        padding-bottom: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
    }

    .cf-input {
    &[type="radio"]:checked:disabled + label::before {
      background: @input-active;
      box-shadow: 0 0 0 1px @input-bg, 0 0 0 2px @input-active;
    }
  }

    .respond-to-range(@bp-med-min, @bp-med-max, {
      .form-l_col {
        width: 50%;
      }
      .message-column {
        width: 100%;
      }
    });

    .respond-to-max(@bp-xs-max, {
      .message-column {
        margin-top: unit( -( @grid_gutter-width / 2 ) / @base-font-size-px, em );
      }
    });
  }

  .rating-message {
      position: relative;
      padding-top:5px;
      display: none;

      &_text {
        display: block;
        padding-left: 1.25em;
        .webfont-regular();
      }

      &_icon {
        position:absolute;
        top:8px;
        color: @green;

      }
  }

.rateq legend {
  margin-bottom: 15px;
}
