$gray-light: #c1cfd9;
$placeholder-text: #bdbdbd;
$text: #4f4f4f;
$gray-dark: #666666;

.is-required {
  padding-left: 4px;
  color: $danger;
}

.input {
  height: 48px;
  border: 1px solid $gray-light;
  border-radius: 4px;
  color: $text;
  font-style: normal;
  box-shadow: none;

  &::placeholder {
    color: $placeholder-text;
  }

  &.is-width-50 {
    max-width: 50px;
  }

  &.is-width-100 {
    max-width: 100px;
  }

  &.is-width-150 {
    max-width: 150px;
  }

  &.is-width-200 {
    max-width: 200px;
  }

  &.is-width-250 {
    max-width: 250px;
  }

  &.is-width-300 {
    max-width: 250px;
  }

  &.is-width-350 {
    max-width: 250px;
  }

  &.is-width-400 {
    max-width: 400px;
  }

  &.is-static {
    height: auto;
    padding-left: 0;
    border: 0;
    background-color: transparent;
    font-weight: 600;

    &.is-blank {
      font-weight: 200;
    }
  }

}

.field {
  &.is-width-50 {
    max-width: 50px;
  }

  &.is-width-100 {
    max-width: 100px;
  }

  &.is-width-150 {
    max-width: 150px;
  }

  &.is-width-200 {
    max-width: 200px;
  }

  &.is-width-250 {
    max-width: 250px;
  }

  &.is-width-300 {
    max-width: 250px;
  }

  &.is-width-350 {
    max-width: 250px;
  }

  &.is-width-400 {
    max-width: 400px;
  }

}

.radio {
  margin-left: 15px;
}

.upload-item {
  padding-left: 10px;
}

.label {
  padding-bottom: 3px;
  color: $gray-dark;
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: 1px;
  text-transform: uppercase;

  &.is-large {
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: none;
  }

  &.is-radio-comment {
    text-transform: uppercase;

    + .description-text {
      display: block;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid $gray-light;
      font-style: italic;
      font-size: .9rem;
    }
  }
}

.checkbox-label {
  position: relative;
  padding-left: 1.5rem;

  input {
    position: absolute;
    top: .3rem;
    left: 0;

  }
}

.checkbox,
.radio {

  .columns {
    padding-left: 15px;
  }

  .column.is-narrow {
    padding-right: 0;
  }
}

.ember-view > label {
  padding-top: 12px;
}

// Gradual Refactors Below

.field-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &__input {
    &--number {
      width: 150px;
      max-width: 100%;
    }
  }
}