input.less

.input {
  .roundedCorners(2px);
  max-width: 480px;
  position: relative;

  input {
    border: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    max-width: 480px;
    display: block;
    outline: none;
    border: 1px solid #383838;
    border-radius: 3px;
    padding: 7px 7px;
    font-size: 13px;
    color: #efefef;
    .transition();

    &:focus {
      border-color: @adminPrimary;
    }
  }

  &.block {
    max-width: none;
    display: block;
    input {
      max-width: none;
    }
  }

  &.big {
    input {
      font-size: 17px;
    }
  }

  &.white {
    input {
      border-color: #cccccc;
      color: #333333;
    }
  }

  &.disabled {
    .opacity(0.5);
  }

  &.with-state {
    input {
      padding-right: 34px;
    }
  }

  .state {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35px;

    >* {
      position: absolute;
      top: 50%;
      left: 50%;
      line-height: 21px;
      height: 21px;
      .transform(translate(-50%, -50%));
    }

    i {
      font-size: 16px;
    }

    &.valid i {
      color: @success;
    }
    &.invalid i {
      color: @alert;
    }
  }
}

input.valid {
  border: 1px solid #00ff00;
}

input.invalid {
  border: 1px solid #ff0000;
}

// White areas
.white-options {
  .input {
    input {
      border-color: #cccccc;
      color: #333333;

      &:focus {
        border-color: @adminPrimary;
      }
    }
  }
}